Full-Stack Web Development with Vue.js and Node

Building the Real Application Chapter 5

Adding a flash message

We have covered the basics of app building. Now that we can add a movie, what would be

really nice is to have a certain message when the movie is saved successfully in the DB or
notify if something goes wrong. There are several npm packages to do just that. We can also

build our own as well. For this application, we will be using a package called: vue-

swal(https://www.npmjs.com/package/vue-swal). Let's add the package first:

$ npm install vue-swal --save

Now, let's include the package in our main.js file:

// 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 VueSwal from 'vue-swal';

import App from './App';

import router from './router';

Vue.use(BootstrapVue);

Vue.use(Vuetify);

Vue.use(VueSwal);

Vue.config.productionTip = false;

/* eslint-disable no-new */

new Vue({

el: '#app',

router,

components: { App },

template: '<App/>',

});