SPA with Vue.js 3 and Kirby. Uses Vite as web dev build tool.
Explore the starterkit live Β»
.env
file for frontend & backendThis project is a starting point for Vue.js v3 as the frontend UI library and Kirby as headless CMS. The content is provided as JSON through Kirby and fetched by the frontend.
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
kirby-vue3-starterkit/
|
| # Includes all frontend-related files
βββ frontend/
| |
| | # Vue.js sources
| βββ src/
| | |
| | | # `Header`, `Footer`, `Intro` and more components
| | | # (Vue.js components correspond to Kirby snippets)
| | βββ components/
| | |
| | | # Commonly used helpers
| | βββ helpers/
| | |
| | | # Hooks for common actions
| | βββ hooks/
| | | |
| | | | # Hook to announce any useful information for screen readers
| | | βββ useAnnouncer.js
| | | |
| | | | # Hook for retrieving pages from the Kirby API as JSON
| | | βββ useKirbyApi.js
| | | |
| | | | # Returns page for current path corresponding to Kirby's `$page` object
| | | βββ usePage.js
| | | |
| | | | # Hook for various service worker methods like registering
| | | βββ useServiceWorker.js
| | | |
| | | | # Returns object corresponding to Kirby's global `$site`
| | | βββ useSite.js
| | |
| | | # Vue Router related methods and exports
| | βββ router/
| | | |
| | | | # Initializes and exports the router instance
| | | βββ index.js
| | | |
| | | | # Handles the router's scroll behaviour
| | | βββ scrollBehaviour.js
| | |
| | | # Minimal store to cache page data fetched via api (Vuex-free)
| | βββ store/
| | |
| | | # Vue.js views correspond to Kirby templates
| | | # Routes are being automatically resolved
| | βββ views/
| | |
| | βββ App.vue
| | βββ main.js
| | βββ serviceWorker.js
| |
| | # Index page used by Vite in development environment
| βββ index.html
|
| # The main entry point of the website
| # Therefore web servers can only access files based in that directory
βββ public/
| |
| | # JavaScript and CSS assets generated by Vite (not tracked)
| βββ assets/
| |
| | # Static images for web manifest and PWA icons
| βββ img/
| |
| | # Kirby's media folder for thumbnails and more (contents not tracked)
| βββ media/
|
| # Various development-centric Node scripts
βββ scripts/
| |
| | # Service worker generator
| βββ buildSw.js
| |
| | # Starts a PHP server for Kirby, run by `npm run kirby:serve` from root
| βββ serveKirby.js
| |
| | # Builds the location from a given api path
| βββ useApiLocation.js
|
| # Kirby's core folder containing templates, blueprints, snippets etc. for Kirby
βββ site/
| βββ blueprints/
| βββ config/
| βββ models/
| βββ plugins/
| βββ snippets/
| | |
| | | # Other files
| | βββ [...]
| | |
| | | # Index page used by Kirby in production environment
| | | # Except for asset loading identical to `frontend/index.html`
| | βββ index.php
| |
| | # Templates for JSON content representations fetched by frontend
| βββ templates/
|
| # Contains everything content and user data related (contents of each directory are not tracked)
βββ storage/
| βββ accounts/
| βββ cache/
| βββ content/
| βββ sessions/
|
| # Kirby CMS and other PHP dependencies handled by Composer
βββ vendor/
|
| # Shared environment variables accessible from both Kirby and Vue.js
| # To be duplicated as `.env`
βββ .env.example
|
| # Handles PHP dependencies
βββ composer.json
|
| # Handles NPM dependencies
βββ package.json
|
| # Router for the PHP built-in development server (used by `serveKirby.js`)
βββ server.php
|
| # Configuration file for Vite
βββ vite.config.js
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.
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.
.env.example
as .env
and optionally adapt its values:cp .env.example .env
npm install
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 localhost
and 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 public/assets
:
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 .env
file:
KIRBY_SERVER_HOSTNAME
and KIRBY_SERVER_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.VITE_
are available in your code following the import.meta.env.VITE_CUSTOM_VARIABLE
syntax.To enable the service worker which precaches essential assets and page API calls for offline capability, set:
VITE_ENABLE_SW
to true
.env.example
as .env
.npm i && npm run build
..env
:
KIRBY_DEBUG
to false
KIRBY_CACHE
to true
(recommended)VITE_ENABLE_SW
to true
(recommended)public
folder.RewriteBase /
in .htaccess
to make site links work.Now your project is hopefully up βnβ running!
Author: johannschopplich
Demo: https://kirby-vue3-starterkit.jhnn.dev/
Source Code: https://github.com/johannschopplich/kirby-vue3-starterkit
#vuejs #vue #javascript