Front Vue instance & Routes

Main Configuration

We need to import all the packages/plugins we need into the main.js file in order to use them everywhere in the application.

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import Vuex from 'vuex'
import VueSocketio from 'vue-socket.io';
import $ from 'jquery';
import 'bootstrap/dist/js/bootstrap';
import Config from './config'

Vue.use(VueRouter);
Vue.use(VueResource);
Vue.use(Vuex);
Vue.use(VueSocketio, Config.urlAPI);

First, we import Vue and its plugins (Vue-router, VueSocketIO, VueX, Vue-Resource).
Then, we import jquery and bootstrap (js) to handle the different animations and helpers.
Finally, we import our config file which customize the app.

The second part is to tell Vue to use these plugins.

Routes

Everything is loaded and ready to go. We can initialize our router!

const router = new VueRouter({
	mode: 'history',
	routes: [
		{
			name: 'home',
			path: '/',
			component: require('./view/home.vue')
		},
		{
			name: 'info',
			path: '/info/:id',
			component: require('./view/info.vue')
		},
		{
			name:'addInfo',
			path: '/newinfo',
			component: require('./view/addInfo.vue')
		},
		{
			name: 'signIn',
			path: '/sign-in',
			component: require('./view/sign-in.vue')
		},
		{
			name: 'signUp',
			path: '/sign-up',
			component: require('./view/sign-up.vue')
		},
		{
			name: 'myProfile',
			path: '/profile',
			component: require('./view/profile.vue')
		},
		{
			name: 'userProfile',
			path: '/user/:id',
			component: require('./view/user.vue')
		},
		{
			name: 'about',
			path: '/about',
			component: require('./view/about.vue')
		},
		{
			name: 'contact',
			path: '/contact',
			component: require('./view/contact.vue')
		}
	]
})

Here, nothing particular to explain, we list all the routes we need and the .vue files related to the route.
Nevertheless, be careful if you add an other route, the file you require must exist!.
The default mode is history, if you need change it, please refer to this documentation page : HTML5 History mode.

The Vue instance

Now we need to create the Vue instance and to render it:

new Vue({
  el: '#app',
  router: router,
  render: h => h(require('./App.vue'))
});

App.vue file will be our main view.