A Vue SPA template that includes many useful boilerplate customisations.
This repository differs from the code generated by the vue init cli command by a number of aspects.
- Includes some files specifically for building and hosting the app on GitHub Pages
- Template home page layout with news and navigation
- Vue Router boilerplate including dynamic loading of static content
- Vuetify Material Design Component Framework
- Vue Test Utils basic test for the navigation Vue
- TypeScript descriptors for various modules
- A global SCSS file
- Custom configuration for Prettier, Vue, and TypeScript
- Custom index.html file with various improvements
To support history mode of Vue Router, a custom 404.html file is provided that does a content redirect to the SPA root. This is loosely based on the work done by Daniel Buchner. Index.html has been extended to force https and disable the GitHub pages functionality for non-production environments.
A simple GitHub Actions deployment script is provided. You must set the GH_PAT secret on the repository for this to work.
The @/router/ folder contains modules that
are dynamically (recursively) imported by @/router/index.ts. Add new routes by either modifying @/router/main.ts or creating a new
ts module in the folder that default exports a list of RouteConfigs.
@/router/static.ts imports all *.md files in the static folder (aliased to #/) using the
frontmatter-markdown-loader which is configured to import
the markdown files and their front matter as HTML and Vue components. All front matter values are bound
to the routes meta and props fields.
All routes are checked for a nav meta field of numeric type and sorted based on that value.
The Navigation component lists
any page in sorted order omitting any page that does not have the nav meta field.
Similarly to the way the router config dynamically loads all *.md files in #/ all *.md files in #/news/ are loaded and listed
by the News component.
News markdown files are expected to have the following front matter:
---
title: News title
date: 2020-04-11
---The date attribute is parsed and sorted so the most recent post is first.
yarn install
yarn serve
yarn build
yarn test:unit
yarn lint