Vue js 2 Tutorial- How To Display Notification Using Vue Toasted Example

Learn How To Display Notification Using Vue Toasted Example

Vue js Toaster Notification Tutorial; We will see in this Vue js app tutorial how to show or display a toast notification in Vue js application using the notable vue-toasted package.

 

In this Vue tutorial, we will learn how to display toaster notifications in the Vue app. We know that vue-toasted is the best source for adding the toaster notification feature in Vue.

 

It is best among others since it’s responsive, touch-friendly, easy to implement, engaging, feature-rich and also gives support for adding icons as well as actions.

 

How To Show Toaster Notification In Vue Js

Step 1- Install Vue CLI

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

Step7- Run Vue App

Step 1- Install Vue CLI

The very basic step for starting with the implementation is just to install Vue CLI. We will be creating a new Vue app using the below command:

npm install -g @vue/cli
vue create da-vinci-app
cd da-vinci-app

 

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 the above error for invoking the app, do remember to update the “scripts”: [] array in the 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"
},

 

Step 2- Add Vue Toasted Plugin

Further, we need to head over to the console for which we open the terminal screen with love. Then, we have to type the given command and order the terminal o install the vue-toasted package in Vue:

npm install vue-toasted

 

Step 3- Install Vue Toasted In Main Js

Afterward, register the vue-toasted package. For that, we have to get into the src/main.js file. Then, we will import the package after which we 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')

Step 4- Formulate Toaster Component

Here, we will form new components/ToastNotification.vue and insert the following code in the file:

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

 

Afterward, we 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>

 

Step 5- Show Toast Notification In Vue Component

Here, we will be shown how to create the toaster notification and show the notification in Vue component. Then, we open components/ToastNotification.vue file and add the given code in 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("“I'm sick of following my dreams, man")
      }
    }    
    };
</script>

 

Step 6- 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.

So, we have to pass the properties in the Vue.use() method and this code has to be added in the 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')

Step 7- Run Vue App

We have to use this npm command in order to start the Vue app:

npm run serve

 

Conclusion

So, friends, we have how to create a toaster notification in the Vue app. We can simply show notifications, success messages, info messages and error notifications to our users. Hope that you will find it very easy to implement while developing your Vue applications.

 

Thanks