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'

// call from component
this.$'Hello', {
  type: 'success',
  duration: 3000

// or'Hello');

vue-toasted support display of icon using Material Icons.'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'`${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.