Vue Toasted With FontAwesome 5 Icon

November 2, 2017

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 component
this.$toasted.show('Hello', {
  type: 'success',
  duration: 3000
})

// or
Vue.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 --save
npm 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;
}
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.