Full-Stack Web Development with Vue.js and Node

Building the Real Application Chapter 5

<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>

<v-content>

<v-container fluid>

<div id="app">

<router-view/>

</div>

</v-container>

</v-content>

<v-footer color="indigo" app>

<span class="white--text">© 2018</span>

</v-footer>

</v-app>

</template>

<script>

import './assets/stylesheets/main.css';

export default {

data: () => ({

drawer: null,

}),

props: {

source: String,

},

};

</script>

Finally, replace the content in src/main.js:

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an

alias.

import 'bootstrap/dist/css/bootstrap.min.css';

import 'bootstrap-vue/dist/bootstrap-vue.css';

import BootstrapVue from 'bootstrap-vue';

import Vue from 'vue';

import Vuetify from 'vuetify';

import App from './App';

import router from './router';