vue-toast-notification-x

Vue Toast Notification (Degica version)

This is a modification of ankurk91/vue-toast-notification. There is one main difference: this version contains an explicit "X" button to close the toasts.

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	2.x	master

Installation

# yarn
yarn add vue-toast-notification-x@^2.0

# npm
npm install vue-toast-notification-x@^2.0

Usage

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

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

//Vue.$toast.open({/* options */});
let instance = app.$toast.open('You did it!');

// Force dismiss specific toast
instance.dismiss();
// Dismiss all opened toast immediately
app.$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	Add a "close" button and allow users to dismiss by clicking it
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

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

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

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

There are some proxy methods to make it more readable.

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

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

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

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

app.$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

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

Install in non-module environments (without webpack)

<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-toast-notification@2"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-toast-notification@2/dist/theme-sugar.css" rel="stylesheet">
<!-- Init the plugin -->
<script>
    const app = Vue.createApp({});
    app.use(VueToast);
    app.mount('#app');
</script>

Run examples on your localhost

• Clone this repo
• Make sure you have node-js >=14.15 and yarn >=1.22 pre-installed
• Install dependencies - yarn install
• Run webpack dev server - yarn start
• This should open the demo page at http://localhost:9000 in your default web browser

Acknowledgements

• Buefy Toast component

License

MIT License