Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Using Vue-Router Dynamic Routes to Load Data Chapter 9

Ensure the PageNotFound component is loaded first, as we are going to

be utilizing it within other components, as well as specifying it as the 404

page in our routes.

Within each file, initialize the type of component it's going to be by either declaring a
variable or using Vue.component. For the views, add a name attribute too – to help with

debugging later on.

For example, all of the files located in the js/components/ folder should be initialized like

the following. Make sure these components are lowercase and are hyphenated:

Vue.component('list-products', {

});

Whereas the components for the routes and views, located in js/views, should look like

the following:

const OrderConfirmation = {

name: 'OrderConfirmation'

};

The last step is to initialize our Vuex store, Vue-router, and Vue application. Open app.js

and initialize the libraries:

const store = new Vuex.Store({});

const router = new VueRouter({});

new Vue({

el: '#app',

store,

router

});

With the Vue components and routes ready to go, our store, route, and app initialized, let's
look at setting up a server (if required) and loading in data.