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