vue-sure-toast

Vue Sure Toast

Vue Sure Toast is a simple VueJS toast plugin. This plugin contains built in features for theming, position, and more. See below for a full list of features.

Samples

Here are the basic themes built into the plugin.

Toast with the progress bar enabled (choppiness is just the gif).

Installation

First import the plugin.

import SureToast from 'vue-sure-toast';

Then configure the plugin with Vue.

// The simplest implementation.
Vue.use(SureToast);

// You can set default option values for the plugin here.  See a full list of options below.
Vue.use(SureToast, options);

// Here is a sample that sets the position and theme for all the toasts.
Vue.use(SureToast, {
  position: 'top-left',
  theme: 'warning'
});

Basic Usage

Displaying a toast message from within a component.

// The simplest method for displaying toast.
this.$sureToast.show(message);

this.$sureToast.show(message, icon);

this.$sureToast.show(message, icon, options);

The options parameter can contain an action that will be appended to the toast an a link.

this.$sureToast.show('I am a toast message', 'fa fa-info-circle', {
  interval: 5000,
  enableManualDismiss: true,
  action: { 
    text: 'DISMISS', 
    onClick: (e, toast) => { alert('TOAST CLICKED: ' + toast); } 
  }
});

You can also pass an array of actions when displaying a toast. If you pass both the 'action' and 'actions' property the 'action' property will take precedence over 'actions'. Make sure you pass one to save yourself some trouble.

this.$sureToast.show('I am a toast message', 'fa fa-info-circle', {
  interval: 5000,
  enableManualDismiss: true,
  actions: [
    { 
      text: 'OPEN', 
      onClick: (e, toast) => { alert('OPEN CLICKED: ' + toast); } 
    },
    { 
      text: 'DISMISS', 
      onClick: (e, toast) => { alert('CLOSE CLICKED: ' + toast); } 
    }
  ]
});

Toast Hooks

There are to methods you can hook into that will get fired when a toast is opened or closed.

// If you want a fire onOpened or onClosed for a specific toast you can do it like so.
this.$sureToast.show('I am a toast message', 'fa fa-info-circle', {
  interval: 5000,
  onOpened(e) {
    console.log('toast opened');
  },
  onClosed(e) {
    console.log('toast closed');
  }
});

If you want to fire the onOpened and onClosed for all the toasts you can pass define your functions in the plugin options.

Vue.use(SureToast, {
  onOpened() {
    console.log('toast opened');
  },
  onClosed() {
    console.log('toast closed');
  }
});

Any plugin level options that are passed through the show function will be ignored by the plugin.

Plugin/Toast Options

Below is a full list of the available options for both the defaults and individual toasts.

Option	Type	Values	Default	Description
interval	number	any number (milliseconds)	5000ms	The duration the toast is visible
enableManualDismiss	boolean	true, false	false	Allows toasts to be manually dismissed
position	string	'top-left', 'top-right', 'bottom-right', 'bottom-left', 'top', 'bottom'	'top-right'	Screen position of the toast
theme	string	'success', 'error', 'info', 'warning', 'default'	'default'	The color scheme of the toast
limit	number	any whole number	3	How many toasts can be displayed at once
persist	boolean	true, false	false	Forces toasts to remain on screen (overrides interval)
reverseToastOrder	boolean	true, false	false	If true displays the latest toasts at the bottom
showProgressBar	boolean	true, false	false	If true displays the a progress bar across the bottom of toast with displaying the remaining time left for the toast
onOpened	function	N/A	undefined	Executed after a toast is opened
onClosed	function	N/A	undefined	Executed after a toast is closed

Plugin ONLY Options

Below is a full list of the options that can only be set at the plugin level (passed to the Vue.use function).

Option	Type	Values	Default	Description
position	string	'top-left', 'top-right', 'bottom-right', 'bottom-left', 'top', 'bottom'	'top-right'	Screen position of the toast
limit	number	any whole number	3	How many toasts can be displayed at once
reverseToastOrder	boolean	true, false	false	If true displays the latest toasts at the bottom

Methods

Below is a full list of the methods available through the Vue instance.

Method	Parameters	Description
show	message, icon, options	Display a toast with the default options
showSuccess	message, icon, options	Displays a success toast (sets theme to 'success')
showError	message, icon, options	Displays an error toast (sets theme to 'error')
showWarning	message, icon, options	Displays a warning toast (sets theme to 'warning')
showInfo	message, icon, options	Display an information toast (sets theme to 'info')
dismiss	toast	Removes a given toast from the DOM (NOT WORKING)
dismissAll	N/A	Removes all toasts from the DOM

Properties

Below is a full list of properties availble through the Vue instance.

Property	Type	Description
pluginDefaultOptions	object	Stores the defaults for the plugin. This is used as a fallback if no plugin or toast level settings are set by the user
userDefaultOptions	object	Stores the default options configured at the plugin level by the user
toastsLoaded	number	Stores the current number of toasts visible on the DOM
toasts	array	Stores an array of DOM elements that represents the toasts current visible on the DOM

Inspiration/Credit

This plugin was inspired by vue-toasted

Development

Developed by: NSSure