Vue Toast Notification

Yet another Vue.js Toast notification plugin.

Demo or JSFiddle

Version matrix

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:

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)

<!-- 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@3"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-toast-notification@3/dist/theme-sugar.css" rel="stylesheet">
<!-- Init the plugin -->
<script>
    const app = Vue.createApp({});
    app.use(VueToast.ToastPlugin);
    app.mount('#app');
</script>

Run examples on your localhost

• Clone this repo
• Make sure you have node-js >=20.16 and pnpm >=9.3 pre-installed
• Install dependencies - pnpm install
• Run webpack dev server - pnpm start
• This should open the demo page in your default web browser

Acknowledgements

• Buefy Toast component

License

MIT License

Changelog

3.1.3

• Fix Typescript types #94

3.1.2

• Fix: issue with z-index

3.1.1

• Fix: warning must have dark text color

3.1.0

• Add bootstrap theme
• Introduce $toast-icons-path scss variable

3.0.4

• Fix: issue #72

3.0.3

• Fix: issue #72

3.0.2

• Fix: issue #69

3.0.1

• Add missing type for typescript usage, #68

3.0.0

• Allow Composition API usage

import {useToast} from "vue-toast-notification";

• (Breaking) Use named export in browser environment

- app.use(VueToast)
+ app.use(VueToast.ToastPlugin)

2.0.1

• Fix: Composition API usage, #58

2.0.0

• Drop support for Vue 2.x, add support for Vue 3.x
• Drop Internet Explorer support

0.6.2

• Fix: SSR issue, #57

0.6.1

• Add ability to keep toast opened, #46
• Chore: upgrade to webpack 5

0.6.0

• Rename close() method to dismiss(), #39
• Rename onClose prop to onDismiss
• Using BEM naming convention in CSS classes

0.5.4

• Fix: type definitions, #30

0.5.3

• Fix: previous release

0.5.2

• Fix: previous release

0.5.1

• Add type definitions

0.5.0

• Fix:
  • #26
  • #27
  • #4
• Change: :warning: CSS classes has been prefixed with v-, if you were overriding any css class then revisit your code

0.4.1

• Fix: #24

0.4.0

• Add: allow html in message prop
• Add: pauseOnHover prop, disabled by default

0.3.0

• Fix: issue #18
• Remove: undocumented prop container

0.1.0

• Add a new color theme along with default, #6
• See UPGRADING.md for migration instructions

0.0.3

• Add: method to close all toast at-once

0.0.2

• Fix: default value for onClose prop

0.0.1

• Initial release