SPA with Vue.js 3 and Kirby. Uses Vite as web dev build tool.
SPA with Vue.js 3 and Kirby. Uses Vite as web dev build tool. Explore the starterkit live »
.envfile for frontend & backend
It's a simple, zero-setup, almost identical port of the Kirby 3 starterkit frontend (snippets, templates and their corresponding JS/CSS) to Vue.js single file components. By "almost" meaning that some features have been added like meta tags generation, environment variables support, accessible routing etc.
To compile the frontend sources, Vite comes to use. Vite is an opinionated web development build tool, created by Evan You. It serves code via native ES Module imports during development, allowing you to develop Vue.js single file components without a bundle step, and bundles it with Rollup for production. Features include:
Some notes about the folder structure with some additional comments on important files.
Expand folder tree
Even without a service worker installed, the frontend will store pages between indiviual routes/views (in-memory store). When you reload the tab, the data for each page is freshly fetched from the API once again.
For offline capability of your Vue app, you can choose to activate the included service worker.
A visual explanation of both methods can be found in the following flow chart:
The service worker precaches all CSS & JS assets required by the Vue app and caches the data of every requested page. All assets are versioned and served from the service worker cache directly.
Each JSON request will be freshly fetched from the network and saved to the cache. If the user's navigator turns out to be offline, the cached page request will be returned.
⚠️ Don't change the
CONTENT_API_SLUGonce you deployed your app publicly and thus a service worker is installed on clients. Otherwise fetch requests will fail and a blank page will show until the new service worker is activated, which then is only possible by closing the tab/PWA.
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.
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.
.envand optionally adapt its values:
cp .env.example .env
Note: Composer dependencies are tracked in this repository by default. Running
composer install isn't necessary.
# Runs `npm run kirby:serve` and `npm run dev` in parallel npm run start
Out of the box the backend is automatically served while developing.
npm run kirby:serve spawns the PHP built-in web server by Node. You can also serve the backend by a web server of your choice. If done so, please specify hostname and port in your
.env if they differ from
8080 respectively so that the decoupled frontend can call the Kirby API for JSON content in development.
Build the frontend assets (CSS & JS files) to
npm run build
Note: If you wish to target older browsers, run
npm run build:compat which transpiles to
es2017. For even older browsers, you can change the target in the
package.json's npm script.
All development and production related configurations for both backend and frontend code are located in your
KIRBY_SERVER_PORTspecify the address where you wish the Kirby backend to be served from. It is used by the frontend to fetch content data as JSON.
VITE_are available in your code following the
To enable the service worker which precaches essential assets and page API calls for offline capability, set:
To keep page data fresh with stale-while-revalidate, set:
npm i && npm run build.
.htaccessto make site links work.
Now your project is hopefully up 'n' running!
In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.
There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.
Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.