Kirby Nuxt Starter Kit

This repository is a port of the Kirby Starter Kit to Nuxt. The content is fetched using the nuxt-kql module from Kirby Headless Starter, a headless Kirby instance instance.

Key Features

🫂 Kirby Query Language with nuxt-kql
🪁 Component based Kirby Blocks
🏛 Global site data similar to Kirby's $site
🗳 Collections for pre-defined queries
🔎 SSR generated SEO metadata
📐 Prettier & ESLint
🔢 Pre-configured VSCode settings
🔖 And much more!

Usage

Prerequisites

Enable Corepack using corepack enable
Install dependencies using pnpm install
Adapt the relevant environment variables:

# Base URL of the Kirby backend
KIRBY_BASE_URL=
# Token for bearer authentication
# See https://github.com/johannschopplich/kirby-headless-starter#private-vs-public-api
KIRBY_API_TOKEN=

Development

Start the development server using pnpm run dev
Visit localhost:3000

Production

Build the application for production with pnpm run build.

Check out the deployment documentation.

FAQ

Are There Any Drawbacks?

Data is fetched within Suspense components to ensure pre-rendered state for the user and SEO. Thus, the initial server response time is increased by about 50–100 ms for the initial KQL page query. This might be a road blocker for you. You can always pre-render routes.

What's Kirby?

getkirby.com – Get to know the CMS.
Try it – Take a test ride with our online demo. Or download one of our kits to get started.
Documentation – Read the official guide, reference and cookbook recipes.
Issues – Report bugs and other problems.
Feedback – You have an idea for Kirby? Share it.
Forum – Whenever you get stuck, don't hesitate to reach out for questions and support.
Discord – Hang out and meet the community.
YouTube - Watch the latest video tutorials visually with Bastian.
Mastodon – Spread the word.
Instagram – Share your creations: #madewithkirby.

johannschopplich/kirby-nuxt-starterkit