Kirby Nuxt Starter Kit
Kirby's sample site – but rewritten in Nuxt
Explore the kit live »
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.
License
MIT License © 2022-PRESENT Johann Schopplich