This project aims to be a starting point for people wanting to use Vue.js with Kirby as headless CMS.
It's a simple, zero-setup, 1:1 port of the Kirby 3 starterkit frontend (snippets, templates and their corresponding JS/CSS) to Vue.js single file components.
You can benefit from all the standard tools used in modern frontend development. For more details visit Vue CLI.
The frontend comes in 3 different flavours:
API - the vue-api folder. The content is fetched using the Kirby's built-in REST API. This was made like a proof-of-concept project and needed a few workarounds to work properly.
JSON - the vue-json folder. Here, the content is fetched using JSON content representations, which proved to be a much more suitable approach for now.
NUXT - the vue-nuxt folder. Finally, this project too uses JSON content representations to fetch the content but also includes many of the goodies Nuxt.js has to offer (including the static site generation)!
ℹ️ inspect the network traffic to see the differences
cd
into its foldernpm install
✔️ Make sure to follow the README in the project folder of your chosen variant.
Out of the box the backend is automatically served while developing using the PHP built-in development server.
Simply follow this guide on how to enable multiple languages in Kirby: https://getkirby.com/docs/guide/languages/introduction, and don't forget to provide some way for your users to switch between those languages :)
ℹ️ I recommend adding new languages using the panel because of this nifty little detail:
The Panel automatically renames all existing content and file meta data files and includes the language extension.
All Kirby related config is found in the kirby.config.js file:
serve
specifies if you want the backend to be automatically served while developing
host
and port
specifies the adress where you want it servedinject
specifies if you want the built Vue app to be injected straight to Kirby
kirby-vue-starterkit.plugin.useVueIndex
in kirby/site/config/config.php to true as well, so that everything is redirected to your Vue app instead of Kirby's templatesbase
, assetsDir
and indexPath
specify where you want to inject the parts of the built Vue appDeploy the contents of kirby
folder to the production server.
⚠️ if you're also injecting into Kirby, make sure you build the Vue app first so the
kirby
folder contains everything needed⚠️ don't forget to set
debug
andallowInsecure
(if you're deploying to https) to false in kirby/site/config/config.php
I tried to make as little modifications to the original Starterkit as possible and package it all in an optional non-intrusive Kirby plugin. However, here is a list of all the changes made to the original starterkit: