Kirby's sample site – but rewritten headless with Nuxt 3!
Explore the kit live »
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.
- 🫂 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!
- 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#bearer-token
KIRBY_API_TOKEN=
- Start the development server using
pnpm run dev - Visit localhost:3000
ℹ️ Enable Take Over Mode in Visual Studio Code.
Build the application for production with pnpm run build.
Check out the deployment documentation.
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.
- 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.
MIT License © 2022 Johann Schopplich