https://github.com/johannschopplich/kirby-nuxt-starterkit
💚 Kirby's sample site – ported to Nuxt and Kirby Query Language
https://github.com/johannschopplich/kirby-nuxt-starterkit
kirby kirby-cms kirby-plugin nuxt nuxt-theme
Last synced: 7 months ago
JSON representation
💚 Kirby's sample site – ported to Nuxt and Kirby Query Language
- Host: GitHub
- URL: https://github.com/johannschopplich/kirby-nuxt-starterkit
- Owner: johannschopplich
- License: mit
- Created: 2022-07-06T09:00:29.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-11-18T16:32:00.000Z (8 months ago)
- Last Synced: 2024-12-16T18:52:06.642Z (7 months ago)
- Topics: kirby, kirby-cms, kirby-plugin, nuxt, nuxt-theme
- Language: Vue
- Homepage: https://kirby-nuxt-starter.pages.dev
- Size: 1.29 MB
- Stars: 52
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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](https://github.com/getkirby/starterkit) to Nuxt. The content is fetched using the [`nuxt-kql`](https://nuxt-kql.jhnn.dev) module from [Kirby Headless Starter](https://github.com/johannschopplich/kirby-headless-starter), a headless Kirby instance instance.
## Key Features
- 🫂 Kirby Query Language with [`nuxt-kql`](https://nuxt-kql.jhnn.dev)
- 🪁 [Component based Kirby Blocks](./components/Kirby/Block/)
- 🏛 Global [site data](./plugins/site.ts) similar to Kirby's `$site`
- 🗳 [Collections](./composables/collections.ts) for pre-defined queries
- 🔎 SSR generated SEO metadata
- 📐 Prettier & ESLint
- 🔢 Pre-configured [VSCode settings](./.vscode/settings.json)
- 🔖 And much more!
## Usage
### Prerequisites
1. Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable`
2. Install dependencies using `pnpm install`
3. Adapt the relevant environment variables:
```bash
# 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
1. Start the development server using `pnpm run dev`
2. Visit [localhost:3000](http://localhost:3000/)
### Production
Build the application for production with `pnpm run build`.
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment).
## 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](https://github.com/johannschopplich/kirby-nuxt-starterkit/blob/413f8d434362380ba07238c91a39fd137368ac51/nuxt.config.ts#L23).
### What's Kirby?
- **[getkirby.com](https://getkirby.com)** – Get to know the CMS.
- **[Try it](https://getkirby.com/try)** – Take a test ride with our online demo. Or download one of our kits to get started.
- **[Documentation](https://getkirby.com/docs/guide)** – Read the official guide, reference and cookbook recipes.
- **[Issues](https://github.com/getkirby/kirby/issues)** – Report bugs and other problems.
- **[Feedback](https://feedback.getkirby.com)** – You have an idea for Kirby? Share it.
- **[Forum](https://forum.getkirby.com)** – Whenever you get stuck, don't hesitate to reach out for questions and support.
- **[Discord](https://chat.getkirby.com)** – Hang out and meet the community.
- **[YouTube](https://youtube.com/kirbyCasts)** - Watch the latest video tutorials visually with Bastian.
- **[Mastodon](https://mastodon.social/@getkirby)** – Spread the word.
- **[Instagram](https://www.instagram.com/getkirby/)** – Share your creations: #madewithkirby.
## License
[MIT](./LICENSE) License © 2022-PRESENT [Johann Schopplich](https://github.com/johannschopplich)