Need help with vue-toast-notification?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

ankurk91
321 Stars 52 Forks MIT License 96 Commits 1 Opened issues

Description

Yet another toast notification plugin for Vue.js :tulip:

Services available

!
?

Need anything else?

Contributors list

# 27,016
Laravel
PHP
stripe
Compose...
89 commits
# 426,669
Python
Shell
JavaScr...
Laravel
1 commit
# 23,888
tailwin...
vanilla...
reddit
share-b...
1 commit

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 |

master
|

Installation

# yarn
yarn add [email protected]^3.0

npm

npm install [email protected]^3.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
| 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

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)





Run examples on your localhost

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

Acknowledgements

License

MIT License

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.