Vue-frontend-boilerplate NPM

Introduction

Simple Vue.js project with additional pre-configured packages and tweaks:

SCSS/SASS support
Inline SVG
Router
Meta

Browser Compatibility

This project uses Browserslist to automatically generate all necessary polyfills.

Install

git clone https://github.com/richardevcom/vue-frontend-boilerplate.git

npm install

Compile and serve (for development)

npm run serve

Compile and minify (for production)

npm run build

Lints and fixes files

npm run lint

SVG

Usage

Path to SVG file

<inline-svg src="/my.svg" />

Note: if you use vue-loader assets or vue-cli, then paths like '../assets/my.svg' will not be handled by file-loader automatically like vue-cli do for <img> tag, so you will need to use it with require:

<inline-svg :src="require('../assets/my.svg')" />

Example

<inline-svg
	src="image.svg"
	transformSource="transformSvg"
	@loaded="svgLoaded($event)"
	@unloaded="svgUnloaded()"
	@error="svgLoadError($event)"
	width="150"
	height="150"
	fill="black"
	aria-label="My image"
></inline-svg>

Read more about using inline SVG package.

Meta

Usage

See API docs for more info.

App.vue

<template>
	<div id="app">
		<nav />
		<router-view class="flex justify-between flex-wrap p-6" />
	</div>
</template>

<script>
	export default {
		name: "App",
		metaInfo: {
			// if no subcomponents specify a metaInfo.title, this title will be used
			title: "Vue Projet",
			// all titles will be injected into this template
			titleTemplate: "%s | Vue",
		},
	       ...
	};
</script>

Home.vue

<template>
	<div class="home">
		<p>This is homepage.</p>
	</div>
</template>

<script>
	export default {
		name: "Home",
		metaInfo: {
			title: "Home",
			// override the parent template and just use the above title only
			titleTemplate: null,
		},
	       ...
	};
</script>