• This repository has been archived on 31/Aug/2023
  • Stars
    star
    207
  • Rank 189,769 (Top 4 %)
  • Language
    PHP
  • License
    MIT License
  • Created over 4 years ago
  • Updated 9 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

โœจ Kirby + Vue SPA starter: automatic routing, i18n, SEO and more!

Note

Thank you to everyone who has used this starterkit in the past. I'm grateful that something built for myself has been useful to others. I have moved from Vue to Nuxt for my projects and will not be maintaining this starterkit actively anymore. It is stable, but be aware.

I recommend to check out Cacao Kit, which is the evolved version of this starterkit. It uses Nuxt and KQL with a headless Kirby setup. It is my best practice starterkit for your next project with server-side rendering. All features of this starterkit are included!


Logo of Kirby + Vue.js Starterkit

Kirby + Vue.js Starterkit

SPA with Vue 3 and Kirby: SEO-friendly, automatic routing, i18n and more!
Explore the starterkit live ยป


Kirby + Vue.js Starterkit

Key Features

Alternatives

SPA

  • kirby-vue-lightkit: โ›บ๏ธ Minimal Kirby + Vue starter: File-based routing, UnoCSS, SEO & more

SSR

Introduction

Or jump right to the setup.

This boilerplate is a tight and comprehensive integration of Vue.js in the frontend and Kirby as headless CMS. The content is provided as JSON through Kirby and fetched by the frontend.

Lighthouse report

Folder Structure

Some notes about the folder structure with some additional comments on important files.

Expand folder tree
kirby-vue3-starterkit/
|
|   # Main entry point of the website, point your web server to this directory
โ”œโ”€โ”€ public/
|   |
|   |   # Frontend assets generated by Vite (not tracked by Git)
|   โ”œโ”€โ”€ dist/
|   |
|   |   # Static images like icons
|   โ”œโ”€โ”€ img/
|   |
|   |   # Kirby's media folder for thumbnails and more (not tracked by Git)
|   โ””โ”€โ”€ media/
|
|   # Kirby's core folder containing templates, blueprints, etc.
โ”œโ”€โ”€ site/
|   โ”œโ”€โ”€ config/
|   |   |
|   |   |   # General configuration settings for Kirby and plugins
|   |   โ”œโ”€โ”€ config.php
|   |   |
|   |   |   # Builds a JSON-encoded `site` object for the frontend
|   |   |   # Used by Vue Router to populate routes, but can be extended by commonly used data
|   |   โ””โ”€โ”€ app-site.php
|   |
|   |   # Only relevant in multi-language setups
|   โ”œโ”€โ”€ languages/
|   |
|   โ”œโ”€โ”€ plugins/kirby-vue-kit/
|   |   |
|   |   |   # Core of the Vite integration plugin, mainly registers routes
|   |   โ”œโ”€โ”€ index.php
|   |   |
|   |   |   # Routes to handle `.json` requests and serving the `index.php` snippet
|   |   โ””โ”€โ”€ routes.php
|   |
|   |   # Templates for JSON content representations fetched by frontend
|   |   # Contains also index page (`_app-index.php`)
|   โ””โ”€โ”€ templates/
|       |
|       |   # Handles build asset paths, inlines the `site` object, includes SEO meta tags, etc.
|       โ””โ”€โ”€ _app-index.php
|
|   # Includes all frontend-related sources
โ”œโ”€โ”€ src/
|   |
|   |   # `Header`, `Footer`, `Intro` and other components (auto imported on-demand)
|   โ”œโ”€โ”€ components/
|   |
|   |   # Composables for common actions
|   โ”œโ”€โ”€ composables/
|   |   |
|   |   |   # Announces any useful information for screen readers
|   |   โ”œโ”€โ”€ useAnnouncer.js
|   |   |
|   |   |   # Provides information about the current language
|   |   โ”œโ”€โ”€ useLanguages.js
|   |   |
|   |   |   # Retrieves pages from the content API
|   |   โ”œโ”€โ”€ useKirbyApi.js
|   |   |
|   |   |   # Returns page data for the current path, similarly to Kirby's `$page` object
|   |   โ”œโ”€โ”€ usePage.js
|   |   |
|   |   |   # Returns a object corresponding to Kirby's global `$site`
|   |   โ””โ”€โ”€ useSite.js
|   |
|   |   # Modules system entries will be auto installed
|   โ”œโ”€โ”€ modules/
|   |   |
|   |   |   # Installs the `v-kirbytext` directive to handle internal page links inside KirbyText
|   |   โ”œโ”€โ”€ kirbytext.js
|   |   |
|   |   |   # Initializes the Vue Router
|   |   โ””โ”€โ”€ router.js
|   |
|   |   # Vue.js views corresponding to Kirby templates
|   |   # Routes are being automatically resolved
|   โ”œโ”€โ”€ views/
|   |
|   โ”œโ”€โ”€ App.vue
|   โ”œโ”€โ”€ index.css
|   โ””โ”€โ”€ index.js
|
|   # Contains everything content and user data related (not tracked by Git)
โ”œโ”€โ”€ storage/
|   โ”œโ”€โ”€ accounts/
|   โ”œโ”€โ”€ cache/
|   โ”œโ”€โ”€ content/
|   โ”œโ”€โ”€ logs/
|   โ””โ”€โ”€ sessions/
|
|   # Kirby CMS and other PHP dependencies (handled by Composer)
โ”œโ”€โ”€ vendor/
|
|   # Environment variables for both Kirby and Vite (to be duplicated as `.env`)
โ”œโ”€โ”€ .env.example
|
|   # Configuration file for Vite
โ””โ”€โ”€ vite.config.js

Caching

The frontend will store pages between individual routes/views. When the tab get reloaded, the data for each page is freshly fetched from the API once again.

Caching for Kirby and Vue 3 starterkit

Stale-While-Revalidate

The stale-while-revalidate mechanism for the usePage hook allows you to respond as quickly as possible with cached page data if available, falling back to the network request if it's not cached. The network request is then used to update the cached page data โ€“ which directly affects the view after lazily assigning changes (if any), thanks to Vue's reactivity.

Prerequisites

  • Node.js with npm (only required to build the frontend)
  • PHP 8.0+

Kirby is not a free software. You can try it for free on your local machine but in order to run Kirby on a public server you must purchase a valid license.

Setup

Composer

Kirby-related dependencies are managed via Composer and located in the vendor directory. Install them with:

composer install

Node Dependencies

Install npm dependencies:

npm ci

Environment Variables

Duplicate the .env.development.example as .env::

cp .env.development.example .env

Optionally, adapt it's values.

Vite will load .env files according to the docs:

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

Static assets

During development Kirby can't access static files located in the src folder. Therefore it's necessary to create a symbolic link inside of the public folder:

ln -s $PWD/src/assets ./public/assets

Usage

Build Mode

During development a .lock file will be generated inside the src directory to let the backend now it runs in development mode. This file is deleted when running the build command.

โ„น๏ธ Alternatively, you can set a KIRBY_MODE env variable containing either development or production to set the app mode programmatically and overwrite the .lock file mechanism. This may ease setups with Docker.

Development

You can start the development process with:

# Runs `npm run kirby` parallel to `vite`
npm run dev

Afterwards visit the app in your browser: http://127.0.0.1:8080

For Valet users: Of course you can use a virtual host alternatively!

Vite is used in combination with backend integration and only serves frontend assets, not the whole app. Thus, http://localhost:3000 won't be accessible.

The backend is served by the PHP built-in web server on http://127.0.0.1:8080 by default, but you can adapt the location in your .env file.

Production

Build optimized frontend assets to public/dist:

npm run build

Vite will generate a hashed version of all assets, including images and fonts saved inside src/assets. It will further create a manifest.json file with hash records etc.

Deployment

โ„น๏ธ See ploi-deploy.sh for exemplary deployment instructions.

โ„น๏ธ Some hosting environments require to uncomment RewriteBase / in .htaccess to make site links work.

Configuration

All development and production related configurations for both backend and frontend code are located in your .env file:

  • KIRBY_DEV_HOSTNAME and KIRBY_DEV_PORT specify the address where you wish the Kirby backend to be served from. It is used by the frontend to fetch content data as JSON.
  • Keys starting with VITE_ are available in your code following the import.meta.env.VITE_CUSTOM_VARIABLE syntax.

For example, setting KIRBY_CACHE to true is useful in production environment.

Content API Slug

To change the API slug to fetch JSON-encoded page data from, set

  • KIRBY_CONTENT_API_SLUG to a value of your liking (defaults to app). It can even be left empty to omit a slug altogether!

You can't use Kirby's internal API slug (defaults to api). If you insist on using api for your content endpoint, you can rename Kirby's by adding a KIRBY_API_SLUG key and set it to something other than api.

Multi-Language

Multiple languages are supported. A comprehensive introduction about multi-language setups may be found on the Kirby website.

To enable language handling, you don't have to edit the config.php manually. Just set

  • KIRBY_MULTILANG to true.
  • KIRBY_MULTILANG_DETECT to true (optional but recommended).

Then, visit the panel and add new languages by your liking. The Panel automatically renames all existing content and file meta data files and includes the language extension.

Language data is provided by the global site object, which can be accessed via the useSite() hook.

Stale-While-Revalidating

To keep page data fresh with stale-while-revalidate, set:

  • VITE_STALE_WHILE_REVALIDATE to true

Credits

License

MIT License ยฉ 2020-2023 Johann Schopplich

More Repositories

1

unlazy

๐Ÿชง Universal lazy loading library for placeholder images leveraging native browser APIs
TypeScript
736
star
2

nuxt-gtag

๐Ÿ”ธ Google Analytics & Ads integration made easy
TypeScript
298
star
3

nuxt-api-party

๐Ÿฌ Securely connect to any API with a server proxy and generated composables
TypeScript
247
star
4

unrested

๐Ÿšฅ Minimal, type-safe REST client using JS proxies (36 loc)
TypeScript
158
star
5

nuxt-prepare

๐ŸฆŽ Build actions for Nuxt
TypeScript
96
star
6

kirby-blurry-placeholder

๐Ÿ–ผ Blurry image placeholders for better UX
PHP
65
star
7

kirby-headless-starter

๐Ÿฆญ Headless-first Kirby starter with bearer token authentication and KQL utilities
PHP
64
star
8

pdfjs-serverless

๐Ÿชญ Serverless build of PDF.js for Deno, workers, and other nodeless environments
TypeScript
53
star
9

kirby-nuxt-starterkit

๐Ÿ’š Kirby's sample site โ€“ ported to Nuxt and Kirby Query Language
Vue
52
star
10

nuxt-vitalizer

๐Ÿชฟ Instantly better LCP scores in Google Lighthouse
TypeScript
52
star
11

kirbyup

๐Ÿ†™ Official bundler for Kirby Panel plugins
TypeScript
51
star
12

nitro-test-utils

๐Ÿงช Testing environment and utilities for Nitro
TypeScript
51
star
13

petite-vue-starter

๐Ÿฆ‹ Petite Vue + Vite + UnoCSS + TypeScript Starter
HTML
47
star
14

vue-signals

๐Ÿ“ถ Solid and Angular signals for Vue.js
TypeScript
46
star
15

loadeer

๐ŸฆŒ Tiny, performant, SEO-friendly lazy loading library. Deprecated, please use https://unlazy.byjohann.dev
TypeScript
44
star
16

kirby-vue-lightkit

โ›บ๏ธ Minimal Kirby + Vue starter: File-based routing, UnoCSS, SEO & more
TypeScript
43
star
17

nuxt-kql

๐Ÿซง Kirby's Query Language API for Nuxt
TypeScript
42
star
18

kirby-locked-pages

๐Ÿ” Password-protect pages, Panel blueprint included
PHP
41
star
19

kirby-writer-marks

Custom marks for Kirby's writer field โ€“ footnote mark included
JavaScript
35
star
20

kirby-content-translator

๐ŸŒ Moved to: https://kirby.tools/content-translator
PHP
34
star
21

kirby-punctuation-section

โœ’๏ธ Insert punctuation marks into your text with a single click
Vue
33
star
22

apiful

โœด๏ธ Unified, pluggable API client management for ofetch, route building and typed OpenAPI clients
TypeScript
33
star
23

cacao-kit-frontend

๐Ÿซ Best practice Nuxt and KQL starter for your headless Kirby CMS
TypeScript
30
star
24

kirby-headless

๐Ÿฆญ Kirby, but headless first with bearer token authentication and KQL utilities
PHP
30
star
25

kirby-vite-unocss-kit

๐ŸŽจ Minimal Vite + UnoCSS + Kirby integration
PHP
29
star
26

kirby-helpers

๐Ÿฌ Dotenv support, meta tag generation and more for Kirby CMS
PHP
26
star
27

animere

๐Ÿƒ CSS-driven scroll-based animations
TypeScript
26
star
28

unocss-cli

๐ŸŽจ Deprecated โ€” moved to @unocss/cli
TypeScript
25
star
29

kirby-algolia-docsearch

๐Ÿ”ฆ Index and search your Kirby site with Algolia DocSearch
PHP
25
star
30

kirby-hashed-assets

๐Ÿ›ท File name hashes support for css() and js() helpers. Without rewrite rules!
PHP
22
star
31

kirby-highlighter

๐ŸŒ Server-side syntax highlighting for the code block & KirbyText
PHP
20
star
32

vue-stickers

๐Ÿฆ One component, multiple fancy sticker variants
Vue
20
star
33

kirbylog

๐Ÿชƒ Zero-dependency global `kirbylog()` helper for any content
PHP
20
star
34

buldy

๐ŸŽˆ Modern CSS framework distilled from the best of larger frameworks
SCSS
18
star
35

kirby-serp-preview

๐Ÿ” Kirby Panel plugin for search engine result page previews
PHP
16
star
36

duecss

๐Ÿงถ Minimal CSS framework built upon & extended by UnoCSS
CSS
14
star
37

nuxt3-starter

๐ŸŒฌ Opinionated Nuxt 3 starter โ€“ incl. modals and more
Vue
14
star
38

plain-spa

๐Ÿฆข Modern SPA deployable as-is without any bundlers
JavaScript
14
star
39

kirbyuse

๐ŸŽ›๏ธ Collection of Vue Composition utilities and typed `window.panel` for Kirby CMS
TypeScript
14
star
40

tokenx

๐Ÿ“ GPT token estimation and context size utilities without a full tokenizer
TypeScript
13
star
41

cacao-kit-backend

๐Ÿซ Headless Kirby instance for the Cacao Kit frontend
PHP
12
star
42

kirby-types

๐ŸŽŠ A Collection of TypeScript types for the Kirby CMS
TypeScript
12
star
43

unacl

๐Ÿ™…โ€โ™€๏ธ๐Ÿ™†โ€โ™‚๏ธ Minimal, type-safe and reactive access control
TypeScript
12
star
44

vue-unquery

๐Ÿชบ Lightweight data management for Vue in suspense & non-suspense contexts
TypeScript
12
star
45

nuxt-i18n

๐Ÿ’ฌ Minimal module for i18n with locale auto-imports & localized routing
TypeScript
11
star
46

raster-sass

๐Ÿ“๏ธ Sass port of the Raster Grid System by Rasmus Andersson
SCSS
9
star
47

kirby-copilot

๐Ÿช AI-powered content generation for Kirby CMS
Vue
9
star
48

johannschopplich.com

๐Ÿ‚ My personal website โ€” built with Kirby & Vite
TypeScript
8
star
49

rollup-pluginkit

A boilerplate for a Kirby panel plugin using Rollup bundler
JavaScript
7
star
50

resultx

๐Ÿค Minimalist, strongly-typed result pattern for TypeScript
TypeScript
6
star
51

unjwt

๐Ÿ†“ Easy creation and verification of JWTs for Node.js, browser and workers
TypeScript
6
star
52

vue-i18n

๐ŸŒ Lightweight internationalization plugin for Vue
TypeScript
6
star
53

nuxt-plausible

๐ŸŽŸ๏ธ Nuxt 3 module to natively integrate Plausible analytics
TypeScript
4
star
54

kirby-seo-audit

๐Ÿƒ State-of-the-art SEO analysis for Kirby CMS
Vue
4
star
55

hashup

๐Ÿ”ข CLI to hash your Kirby build assets
TypeScript
3
star
56

kirby-modern

๐Ÿš€ Kirby starterkit enhanced with public folder setup, env variables, static site generator & more
PHP
3
star
57

utils

๐Ÿงฌ A collection of utilities for my projects
TypeScript
3
star
58

dachsbau-backend

๐Ÿฆก Kirby headless backend for dachsbau-tautenhain.de
PHP
3
star
59

a11y-kirby-vue-starterkit

โ™ฟ Kirby + Vue starterkit w/ accessible routing & SEO-friendliness
PHP
3
star
60

realtroll.de

๐ŸŽฎ Website fรผr den Spieleentwickler real Troll
CSS
3
star
61

kirby-vite

โšก๏ธ Vite integration for Kirby CMS
PHP
3
star
62

wordle-pwa

๐ŸฆŠ Wordle app to fork and customize for your friends
Vue
3
star
63

11th

๐Ÿงฐ Generic Eleventy starterkit with an emphasis on hashing assets and SEO
JavaScript
2
star
64

git-webhooks-auto-deployment

๐Ÿค– Auto deploys with one script. Compatible with GitHub, GitLab, Gitea and direct URL.
PHP
2
star
65

deno-deploy-docker

๐Ÿฆ• Run your Deno Deploy scripts in a Docker container
JavaScript
2
star
66

nitro-starter

๐Ÿ›Ž๏ธ Best practice Nitro Starter with full Vitest coverage
TypeScript
2
star
67

nuxt3-fetch-error-repro

Vue
2
star
68

bildhauer-volkmar-kuehn.de

๐Ÿฐ Personal website for German sculpting artist Volkmar Kรผhn
TypeScript
2
star
69

vitesse-prettier

๐ŸŒฌ Opiniated Vitesse variation
Vue
2
star
70

ui

A collection of Vue.js components for my projects
Vue
1
star
71

dachsbau-frontend

๐Ÿฆก Nuxt 3 & KQL frontend for dachsbau-tautenhain.de
Vue
1
star
72

kirby-nuxt-template-starterkit

๐Ÿ’š Kirby's sample site โ€“ ported to Nuxt 3 using Kirby templates
Vue
1
star
73

byjohann.link

๐Ÿ”— Personal linktree page
Vue
1
star