downloads js-delivr npm-version github-tag build license TypeScript
Yet another Vue.js Toast notification plugin.
| Vue.js version | Package version | Branch |
|---|---|---|
| 2.x | 1.x | 1.x |
| 3.x | 3.x | main |
npm install vue-toast-notification@^3
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(); } }
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();
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 |
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 });
There are some proxy methods to make it more readable.
this.$toast.success('Profile saved.', { // optional options Object })
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' })
<!-- 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>
- Clone this repo
- Make sure you have node-js
>=20.16and pnpm>=9.3pre-installed - Install dependencies -
pnpm install - Run webpack dev server -
pnpm start - This should open the demo page in your default web browser
- Buefy Toast component
MIT License