Vue Toasted With FontAwesome 5 Icon

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;}

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.