Post
Ask Question

Toastr Notification In Vue.js

Introduction

In this article, we’ll create a demo of how we can show Toastr notifications in a Vue.js application.Toastr is a library that is used to create a notification alert popup.

Create VueJS Project

Create a Vue.js project by using the following command.

vue create toastrmsg

Now open the newly created project in Visual Studio Code.

Install vue-toasted library

Now install vue-toasted library into this project by using the following npm command.

npm install vue-toasted --save

Now install Bootstrap in this project by using the following command.

npm install bootstrap

Now open the main.js file and add following code.

import Vue from 'vue'
import App from './App.vue'
import Toasted from 'vue-toasted';
import 'bootstrap/dist/css/bootstrap.css';
Vue.config.productionTip = false
Vue.use(Toasted, {
    duration: 2000
})
   
new Vue({
    render: h => h(App),
}).$mount('#app')

Now right click on the components folder and add a new component named 'Toastrdemo.vue'. Now open Toastrdemo.vue component and add the following code.

<template>
  <div class="container">
    <div class="large-12 medium-12 ">
      <div style="margin: 20px;" class="col-sm-12 btn btn-info">Toastr Notification In Vue.js </div>
      <button style="margin: 10px;" class="btn btn-success" v-on:click="successmsg()">Success Message</button>
      <button style="margin: 10px;" class="btn btn-danger" v-on:click="errormsg()">Error Message</button>
      <button style="margin: 10px;" class="btn btn-warning" v-on:click="showmsg()">Show Message</button>
      <button style="margin: 10px;" class="btn btn-info" v-on:click="infomsg()">Info Message</button>
    </div>
  </div>
</template>
    
  <script>
  
  export default {
    data() {
      return {
      }
    },
  
    methods: {
      successmsg() {
        this.$toasted.success("Success Message")
      },
      errormsg() {
        this.$toasted.error('Error Message')
      },
      showmsg() {
        this.$toasted.show("Show Message", {
          theme: "toasted-primary", position: "top-center", duration: 5000
        });
      },
      infomsg() {
        this.$toasted.info('Info Message')
      }
    }
  }
  </script>

Now open App.vue and add following code.

<template>
  <div id="app">
    <Toastrdemo></Toastrdemo>
  </div>
</template>

<script>
import Toastrdemo from './components/Toastrdemo.vue'
export default {
  name: 'App',
  components: {
    Toastrdemo
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

Now, run the project by using following command.

npm run serve

Position of Toastr

By default, all the toastr will be positioned on the top right of page, but we can change the position of the Toastr.

  • top-right,
  • top-center', 
  • top-left,
  • bottom-center,
  • bottom-right,
  • bottom-left

Now go to main.js file and add the following code.

import Vue from 'vue'
import App from './App.vue'
import Toasted from 'vue-toasted';
import 'bootstrap/dist/css/bootstrap.css';
Vue.config.productionTip = false
Vue.use(Toasted, {
    duration: 5000,
    position: 'top-center', // ['top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left']
})
   
new Vue({
    render: h => h(App),
}).$mount('#app')

Now run the project 

Duration and Theme

We can set display time after which the Toastr should automatically disappear.,also we can change the theme, add the following code in main.js.

import Vue from 'vue'
import App from './App.vue'
import Toasted from 'vue-toasted';
import 'bootstrap/dist/css/bootstrap.css';
Vue.config.productionTip = false
Vue.use(Toasted, {
    duration: 5000,
    theme: 'bubble', // ['toasted-primary', 'outline', 'bubble']
    position: 'top-right', // ['top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left']
})

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

Now run the project and check

Summary

In this article, we learned about Toastr and how we use Toastr notifications in Vue.js. Toastr provides some unique notification pop-ups which we can use to display a message or alerts within the application. 


Similar Articles