Vue.js 2 Design Patterns and Best Practices

Using the router

Let's spin up a playground project and install the vue-router library. This allows us to take advantage of routing inside our application and give us the power of a modern SPA.

Run the following commands in your Terminal:

# Create a new Vue project$ vue init webpack-simple vue-router-basics# Navigate to directory$ cd vue-router-basics# Install dependencies$ npm install# Install Vue Router$ npm install vue-router# Run application$ npm run dev

As we're using webpack as part of our build system, we've installed the router with npm. We can then initialize the router inside of src/main.js:

import Vue from 'vue';import VueRouter from 'vue-router';import App from './App.vue';Vue.use(VueRouter);new Vue({  el: '#app', render: h => ...