Kirby Nuxt Starter Kit

Kirby's sample site – but rewritten headless with Nuxt 3!
Explore the kit live »

Kirby Nuxt Starterkit

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

This is my best practice solution to build a Nuxt 3 based frontend on top of Kirby in headless mode.

Key Features

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

Prerequisites

Before getting started, please make sure you have installed the recommended setup.

• Node.js^* (v16, the latest LTS version) 👉 [Download]
• pnpm^* (the fast and disk space efficient package manager) 👉 [Download]
• Visual Studio Code 👉 [Download]
• Volar Extension 👉 [Download]
  • Enable Take Over Mode

Setup

Make sure to install the dependencies:

pnpm install

Adapt the relevant environment variables:

# Site base URL for SEO meta data
NUXT_PUBLIC_BASE_URL=<url-of-your-website>
# Base URL of the Kirby backend
KIRBY_BASE_URL=
# Token for bearer authentication
# See https://github.com/johannschopplich/kirby-headless-starter#bearer-token
KIRBY_API_TOKEN=

Development

Start the development server on localhost:3000:

pnpm dev

Production

Build the application for production:

pnpm 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. It's fine for my usecase. Still a lot faster than WordPress etc. 😉

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.
• Twitter – Spread the word.
• Instagram – Share your creations: #madewithkirby.

License

MIT License © 2022 Johann Schopplich