Kirby Nuxt Starter Kit
Kirby's sample site – but rewritten headless with Nuxt 3!
Explore the kit live »
Kirby Nuxt Starterkit
This is my best practice solution to build a Nuxt 3 based frontend on top of Kirby in headless mode.
🫂Kirby Query Language with
🪁Component based Kirby Blocks
🏛Global site data similiar to Kirby's
🗳Collections for pre-defined queries
🔎SSR generated SEO meta data
📐Prettier & ESLint
🔢Pre-configured VSCode settings
🔖And much more!
Before getting started, please make sure you have installed the recommended setup.
- Node.js* (v16, the latest LTS version)
- pnpm* (the fast and disk space efficient package manager)
- Visual Studio Code
- Volar Extension
- Enable Take Over Mode
Make sure to install the dependencies:
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=
Start the development server on localhost:3000:
Build the application for production:
Check out the deployment documentation.
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.
- 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.