Building the Real Application Chapter 5We will be using both Vuetify and Bootstrap combined when building the application. The
first step is to install the packages:
$ npm install bootstrap bootstrap-vue vuetify --saveAfter these get installed, the next thing we need to do is require these packages in our main
file. So, in the src/main.js file, add the following lines:
// 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';Vue.use(BootstrapVue);
Vue.use(Vuetify);Vue.config.productionTip = false;/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
});We also need to use vuetify.css, which holds all the style sheets related to its design. We
will need this as well. We can just simply link a style sheet for this. In the index.html file,
add the following lines of code in your head section:
...
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css"
rel="stylesheet">
<title>movie_rating_app</title>
</head>
...