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.
#vue-js #vue-toast-notification #vue-toasted