Vue Js Toast Notification Example From Scratch

Hello devs in this tutorial i am going to show you how to display or show toast notification in vue application. To show this toasted notification in vue js i am going to use this vue-toasted npm package. It is awesome package and easy to use. We can easily customized this vue-toasted npm package and we can show toast notification according to our required position in our vue app.

Vue Toasted is one of the best toast plugin available for vue js. it is used by vue js, Laravel, nuxt js and trusted by many more organizations it is responsive, touch compatible, easy to use, attractive and feature rich with icons, actions etc.

You can see the demo from here. Let's try this tutorial vue toast notification example.

Step 1 : Install Vue App

In this first step we need to create our vue app to complete and show toasted notification. Let's run this command to create this:

npm install -g @vue/cli

vue create vue-toasted

//then

cd vue-toasted

Step 2: Install Vue Toasted Package

Next, open your terminal, then type suggested command and order terminal to install the vue-toasted package in vue.

# install it via npm 
npm install vue-toasted --save

# install it via yarn 
yarn add vue-toasted

Step 3: Change Main Main Js

Now we have to change src/main.js to import that vue-toasted package. Let's do it.

src/main.js

import Vue from 'vue'
import App from './App.vue'

// import + use
import Toasted from 'vue-toasted';
Vue.use(Toasted, {
  duration: 1500
})

new Vue({
  render: h => h(App)
}).$mount('#app')

In this step, you will add the toaster component in the src/App.vue file.

Now see the example component of our vue toast notification. 

components/ToastNotification.vue 

You have to pass the properties in the Vue.use() method, this code resides in src/main.js file. You can easily customize this toast package notification like below.

src/main.js

import Vue from 'vue'
import App from './App.vue'

// customize toaster
import Toasted from 'vue-toasted';
Vue.use(Toasted, {
  duration: 1500,
  position: 'bottom', // ['top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left']
  theme: 'outline', // ['toasted-primary', 'outline', 'bubble']
  iconPack: 'material' // ['material', 'fontawesome', 'mdi', 'custom-class', 'callback']
})

new Vue({
  render: h => h(App)
}).$mount('#app')

Read also : Vuex Complete Guide with Axios Api Call in Vue Js

Hope it can help you.