Vue SPA Template

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

GitHub Pages

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.

Vue Router

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.

News

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.

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Run your unit tests

yarn test:unit

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.