This is a simple vue pluign toast notifier with tailwind
npm i @k90mirzaei/vue-toast
yarn add @k90mirzaei/vue-toastimport { createApp } from 'vue'
import App from './App.vue'
import toast from 'vue-toast'
import 'vue-toast/dist/index.css'
createApp(App).use(toast).mount('#app')this.$toast.show(`Hey! I'm here`);
this.$toast.success(`Hey! I'm here`);
this.$toast.error(`Hey! I'm here`);
this.$toast.warning(`Hey! I'm here`);
this.$toast.info(`Hey! I'm here`);
// Close all opened
this.$toast.clear();The API methods accepts these options:
| Attribute | Type | Default | Description |
|---|---|---|---|
| message | String | -- | Message text/html (required) |
| type | String | default |
One of success, info, warning, error, default |
| duration | Number | 4000 |
Visibility duration in milliseconds or false that disables duration |
| queue | Boolean | false |
Wait for existing to close before showing new |
| maxToasts | Number or false | 5 |
Defines the max of toasts showed in simultaneous |
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.show("Howdy!");
// Can accept an Object of options.
// If yout don't pass options, the default toast will be showed
this.$toast.show("Something went wrong!", {
type: "error",
// all of other options may go here
});Please see CONTRIBUTING for details.
Please review our security policy on how to report security vulnerabilities.
The MIT License (MIT). Please see License File for more information.
This project needs a ⭐️ from you. Don't forget to leave a star ⭐️