GitHub - ankurk91/vue-toast-notification: Yet another toast notification plugin for Vue.js 🌷 (original) (raw)

Vue Toast Notification

downloads js-delivr npm-version github-tag build license TypeScript

Yet another Vue.js Toast notification plugin.

Demo or JSFiddle

Version matrix

Vue.js version Package version Branch
2.x 1.x 1.x
3.x 3.x main

Installation

npm install vue-toast-notification@^3

Usage

Plugin usage

Install the plugin

import {createApp} from 'vue'; import ToastPlugin from 'vue-toast-notification'; // Import one of the available themes //import 'vue-toast-notification/dist/theme-default.css'; import 'vue-toast-notification/dist/theme-bootstrap.css';

const app = createApp({}); app.use(ToastPlugin); app.mount('#app');

Then use in your components

export default { mounted() { let instance = this.$toast.open('You did it!');

    // Force dismiss specific toast
    instance.dismiss();

    // Dismiss all opened toast immediately
    this.$toast.clear();
}

}

Composition API usage

import {useToast} from 'vue-toast-notification'; import 'vue-toast-notification/dist/theme-sugar.css';

const $toast = useToast(); let instance = $toast.success('You did it!');

// Force dismiss specific toast instance.dismiss();

// Dismiss all opened toast immediately $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, set to 0 to keep toast visible
dismissible Boolean true Allow user dismiss by clicking
onClick Function -- Do something when user clicks
onDismiss Function -- Do something after toast gets dismissed
queue Boolean false Wait for existing to dismiss before showing new
pauseOnHover Boolean true Pause the timer when mouse on over a toast

API methods

this.$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 this.$toast.open('Howdy!');

// Can accept an Object of options this.$toast.open({ message: 'Something went wrong!', type: 'error', // all of other options may go here });

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

There are some proxy methods to make it more readable.

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

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

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

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

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

Global options

You can set options for all the instances during plugin initialization

app.use(VueToast, { // 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' })

Install in non-module environments (without webpack)

Run examples on your localhost

Acknowledgements

License

MIT License