Vue Toast Notification

In this post we will learn how to implement toast notification in vuejs. We can implement toast notification in vuejs using vuejs npm, yarn oR CDN.

Installation:

#yarn     
     yarn add vue-toast-notification

# npm 

 
   npm install vue-toast-notification

 

Usage

import

 Vue 

from

 'vue';

import

 VueToast 

from

 'vue-toast-notification';

// Import one of available themes

import

 'vue-toast-notification/dist/theme-default.css';

//import ‘vue-toast-notification/dist/theme-sugar.css’;

 
Vue.use(VueToast);
let instance 

=

 Vue.$toast.open('You did it!');

//Vue.$toast.open({/* options */});

// Force close specific toast

instance.close();

// Close all opened toast immediately

Vue.$toast.clear();

Available options

The API methods accepts these options:

Attribute	Type	Default	Description
Message	String	—	Message text/html (required)
type	String	success	One of success, info, warning, error, default
position	String	bottom-right	One of top, bottom, top-right, bottom-right,top-left, bottom-left
duration	Number	3000	Visibility duration in milliseconds
dismissible	Boolean	true	Allow user close by clicking
onClick	Function	—	Do something when user clicks
onClose	Function	—	Do something after toast gets dismissed
queue	Boolean	false	Wait for existing to close before showing new
pauseOnHover	Boolean	true	Pause the timer when mouse on over a toast

API Methods

Vue.$toast.open(options)

This is generic method, you can use this method to make any kind of toast.

// Can accept a message as string and apply rest of options from defaults

Vue.$toast.open('Howdy!');
 

// Can accept an Object of options

Vue.$toast.open({
    message

:

 'Something went wrong!',
    type

:

 'error',
    

// all of other options may go here

});

Vue.$toast.success(message,?options)

There are some proxy methods to make it more readable.

Vue.$toast.success('Profile saved.', {
  

// optional options Object

})

Vue.$toast.error(message,?options)

Vue.$toast.warning(message,?options)

Vue.$toast.info(message,?options)

Vue.$toast.default(message,?options)

Install in non-module environments (without webpack)

<!– Vue.js –>

<script 

src

="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>

<!– Lastly add this package –>

<script 

src

="https://cdn.jsdelivr.net/npm/vue-toast-notification"></script>
<link 

href

="https://cdn.jsdelivr.net/npm/vue-toast-notification/dist/theme-default.css" 

rel

="stylesheet">

<!– Init the plugin –>

<script>
Vue.use(VueToast);
</script>