vue-toasted is a pretty neat notfication plugin for VueJS, showing Android-like toast notification which support touch.
npm install vue-toasted --save
import Toasted from 'vue-toasted'Vue.use(Toasted)// call from componentthis.$toasted.show('Hello', { type: 'success', duration: 3000})// orVue.toasted.show('Hello');
vue-toasted
support display of icon using Material Icons.
Vue.toasted.show('Hello', { icon: 'check'});
Update 20-11-2017: Font Awesome support is officially supported
The following code allow support of Font Awesome 5 Icon.
Install Font Awesome 5
.
npm install @fortawesome/fontawesome --savenpm install @fortawesome/fontawesome-free-solid --save
Javascript code to load Font Awesome 5 Icon with vue-toasted
.
import fontawesome from '@fortawesome/fontawesome'import faSolid from '@fortawesome/fontawesome-free-solid'Vue.toasted.show(`${fontawesome.icon(faSolid.faCoffee).html} Hello`, { type: 'success', duration: 3000})
For spacing and margin, include the following css.
.toasted-container .toasted > svg { margin-right: .5rem; margin-left: -.4rem;}