Vue 2 Display Notification using Vue Toasted Tutorial

Last Updated on by in Vue JS

Vue Js Toaster Notification tutorial; Knowledge is useless if it is accumulated and not shared, to follow the same ritual we will share with you how to show toast notification in Vue js application using the profoundly notable vue-toasted package.

Informing your user about every event occurring in your app is the sign of a great user experience.

A good user experience tends to give the feeling of gratification to your users, which is essentially helpful in forming the habit of using your product repeatedly.

It is said that pleasure orders brain to accommodate rewarding and worthwhile behavior.

In this quick guide, we will show you how to display toaster notifications in the vue app. It is our notion that vue-toasted is the best source for adding toaster notification features in vue.

It is best among others because it is responsive, touch-friendly, easy to implement, engaging, feature-rich, not only but also gives support for adding icons and actions on the go.

How to Show Toaster Notification in Vue Js

  • Step 1: Getting Started
  • Step 2: Add Vue Toasted Plugin
  • Step 3: Import Vue Toasted in Main Js
  • Step 4: Formulate Toaster Component
  • Step 5: Show Toast Notification in Vue Component
  • Step 6: Customize Toasted Notifications
  • Step 7: Run Vue App

Getting Started with Vue

You may skip this step, if you have already laid down the vue development foundation, there is no point in reinventing the wheels.

However, for the beginner developers you may use the to setup the complete vue environment on your system using the following sets of commands.

Let’s take the first step towards the journey of thousand miles.

npm install -g @vue/cli

vue create da-vinci-app

cd da-vinci-app

Node.js Gatsby error – “digital envelope routines::unsupported …”

Error: digital envelope routines::unsupported

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

To remove above error for invoking the app, make sure to update the "scripts": [] array in package.json file.

"scripts": {
    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},

Add Vue Toasted Plugin

Next, head over to console, open terminal screen with love, then type suggested command and order terminal to install the vue-toasted package in vue.

npm install vue-toasted

Import Vue Toasted in Main Js

Furthermore, register the vue-toasted package; the registration process is simple to get into the src/main.js file. Here, first, import the package, then tie the Toasted module to use() method.

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

Formulate Toaster Component

Next, form a new components/ToastNotification.vue and insert the following code in the file.

<template>
  <div>
      <!-- ... -->
  </div>
</template>
 
<script>
    export default {
    name: "App",
    data() {
        return {
    
        };
    }
    };
</script>

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

<template>
  <div>
    <ToastNotification/>
  </div>
</template>

<script>
    import ToastNotification from './components/ToastNotification.vue'

    export default {
      name: 'App',
      components: {
        ToastNotification
      } 
    }
</script>

Show Toast Notification in Vue Component

The step reveals how to create toaster notification and show notification in vue component, open components/ToastNotification.vue file and add the suggested code inside the file.

<template>
  <div>
      <button v-on:click="onClick()">Show Notification</button>
  </div>
</template>
 
<script>
    export default {
    name: "App",
    data() {
        return {
        };
    },
    methods: {
      onClick(){
          this.$toasted.show("Vue Notification Component Example")
      }
    }    
    };
</script>

Customize Toasted Notifications in Vue

The vue toasted package offers tons of handy properties which can easily customize the look and feel, direction and other stuff very easily.

You have to pass the properties in the Vue.use() method, this code resides in src/main.js file.

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

You can also check out other properties of vue toasted here.

Run Vue App

Ultimately, this recommended command helps you start the vue app, and the url lets you check the feature on the browser.

npm run serve
http://localhost:8080

Vue Js Toaster Notification

Conclusion

The vue-toasted is a true prodigy; with the help of its powerful methods, we managed to create toaster notifications in the vue app; you can show notifications, success messages, info messages, and error notifications to your users.

When we first used the vue toasted package, we liked its audacity to show essential notifications. The vue toaster notification tutorial is over; we hope you enjoyed this guide.

Reference: https://www.npmjs.com/package/vue-toasted