Full-Stack Web Development with Vue.js and Node

Building the Real Application Chapter 5

Creating an Add movie form

First, we need to add a link that takes us to a form to add the movies. For that, we need to

change the toolbar in App.vue. So, let's add a link to the toolbar in App.vue:

<v-toolbar color="indigo" dark fixed app>

<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-

icon>

<v-toolbar-title>Home</v-toolbar-title>

<v-spacer></v-spacer>

<v-toolbar-items class="hidden-sm-and-down">

<v-btn flat v-bind:to="{ name: 'AddMovie' }">Add Movie</v-btn>

</v-toolbar-items>

</v-toolbar>

Now that we have the link, we need to add a route to link it to the page. Just like we did for

our Contact page, let's add a route that will be used to add movies to our application. So,

in routes/index.js:

import Vue from 'vue';

import Router from 'vue-router';

import Home from '@/components/Home';

import Contact from '@/components/Contact';

import AddMovie from '@/components/AddMovie';

Vue.use(Router);

export default new Router({

routes: [

{

path: '/',

name: 'Home',

component: Home,

},

{

path: '/contact',

name: 'Contact',

component: Contact,

},

{

path: '/movies/add',

name: 'AddMovie',

component: AddMovie,

},

],

});