@meforma/vue-toaster

Vue Toaster

Vue.js toast notification plugin for vue 3

Installation

# yarn
yarn add @meforma/vue-toaster

# npm
npm install @meforma/vue-toaster

Import

// In you main.js
// ... considering that your app creation is here
import Toaster from '@meforma/vue-toaster';

createApp(App).use(Toaster).mount('#app')

Usage

// this.$toast.show(message, {/* options */});
this.$toast.show('You did it!');
this.$toast.success('You did it!');
this.$toast.error('You did it!');
this.$toast.warning('You did it!');
this.$toast.info('You did it!');

// Close all opened toast after 3000ms
setTimeout(this.$toast.clear, 3000)

Available options

The API methods accepts these options:

Attribute	Type	Default	Description
message	String	--	Message text/html (required)
type	String	default	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	4000	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
useDefaultCss	Boolean	true	User default css styles

API methods

show(message, ?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
this.$toast.show('Howdy!');

// Can accept an Object of options.
// If yout don't pass options, the default toast will be showed
this.$toast.show('Something went wrong!', {
    type: 'error',
    // all of other options may go here
});

success(message,?options)

There are some proxy methods to make it more readable. The same rule for error, info and warning methods

this.$toast.success('Profile saved.', {
  // optional options Object
})

Global options

You can set options for all the instances during plugin initialization

app.use(Toaster, {
  // One of the options
  position: 'top'
})

Further you can override option when creating new instances

this.$toast.success('Order placed.', {
  // override the global option
  position: 'bottom'
})

Based on

• vue-toast-notification plugin

License

MIT License