This is a proof-of-concept project which uses Kirby as a headless CMS at the backend and Vue.js as a UI library at the frontend. The communication in between is handled using the Kirby's REST API.
Snippets, templates and their specific JS/CSS from the Kirby Starterkit have been ported to Vue.js Single File Components.
This project is trying to be a simple, zero-setup, straightforward, 1:1 port with the least possible modifications done to the original Starterkit in order to serve as a nice starting point for people wanting to use Vue.js with Kirby.
The project benefits from all the standard tools used in modern frontend development. For more details visit: Vue CLI.
- Node.js with npm is required to install the project
- Kirby runs on PHP 7.1+
npm install
- to customize configuration see Configuration Reference
- out of the box the backend is served using the PHP built-in development server, however:
- you can serve it any way you want but remember to specify the address in the backend.js file
- if using the built-in server, run it with
npm run serve:backend
- open kirby panel and create a new user with preconfigured read-only role Api
- add its credentials to the .env.local file
npm start
npm run serve:backend
npm run serve:frontend
npm run lint
npm run build
Don't forget to:
- adjust public paths in .env.production file
- adjust
RewriteBase
in public/.htaccess file to match the frontend's public path - set
debug
andallowInsecure
(if you're deploying to https) to false in backend/site/config/config.php
Deploy the contents of backend
and frontend
folders to the same server to their corresponding public paths.
-
I highly recommend using Kirby's Content Representations for more sophisticated templates or models.
-
Vue.js components in src/components folder correspond to Kirby snippets.
-
Vue.js views in in src/views folder correspond to Kirby templates and the routes are being automatically resolved.
-
If you add a new page with a new blueprint you also need to manually add a new View (exactly as you would add a new Template if you were working on a frontend in Kirby).
-
Vue.js mixin
page
src/components/mixins/page.js roughly corresponds to the$page
object in Kirby, but only the functionality needed in Starterkit is present. -
For now there is no nice way how to get a
kirbytext
of a field or how toresize
orcrop
an image easily using the Kirby REST API so for that some custom endpoints have been added (backend/site/config/config.php).- This being the only modification done to the Kirby Starterkit.
- It will be removed in future if a nicer solution gets exposed by Kirby.