degica
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.0Usage
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.15and yarn>=1.22pre-installed - Install dependencies -
yarn install - Run webpack dev server -
yarn start - This should open the demo page at
http://localhost:9000in your default web browser
Acknowledgements
- Buefy Toast component
License
MIT License