:warning::warning::warning: Not maintained anymore! :warning::warning::warning:
Please head over to the Kirby + Vue.js 3 Starterkit for this project's successor.
Based on Jakub Medvecký Heretik's Kirby Vue Starterkit. Be sure to check it out!
Key features:
This project uses Kirby as a headless CMS at the backend and Vue.js as the frontend UI library. The content is fetched using the Kirby's JSON content representation.
Snippets, templates and their specific JS/CSS from the Kirby Starterkit have been ported to Vue.js Single File Components with the least possible modifications done to the original Starterkit in order to serve as a simple 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 you may dive into the Vue CLI.
All parts of the website can be handled from the root level.
composer.json
for package.json
dependencies..env
for environment variables accessible from both Kirby and Vue.src
.The standard Kirby setup is modified to reflect a modern web project.
vendor
.public
reflects the main entry point of the website. Therefore web servers can only access files based in that directory.Install npm and composer dependencies.
npm install
composer install
Note: Composer dependencies are tracked in this repository by default. Running composer install
isn't necessary.
npm run serve
This command spawns a PHP's built-in web server by Node. Another way to start the PHP built-in server is to run ./serve
. You can also serve the backend by a web server of your choice. If done so, please specify hostname and port in the kirby.config.js
if they differ from 127.0.0.1:8000
and more importantly set serveKirby
to false
in the Vue config file.
npm run build
This builds the frontend assets and saves them to the public
directory and the index file as a Kirby template to site/templates/default.php
.
Finally, deploy your project and point your web server to the public
folder.
page
mixin roughly corresponds to the Kirby's $page
object, but only the functionality needed for the starterkit is present.Big thanks to Jakub Medvecký Heretik for his work on kirby-vue-starterkit!