Kirby's sample site – but rewritten in Nuxt 3
Explore the kit live »
This repository is a port of the Kirby Starter Kit to Nuxt 3. The content is fetched using the nuxt-kql module from Kirby Headless Starter, a headless Kirby instance instance.
- 🫂 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!
- 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=- 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-present Johann Schopplich
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent