Vue3 Toaster
Lightweight toast-notification plugin for Vue 3
Installation
npm install @incuca/vue3-toasterUsage
Import in your main.js
import Toaster from "@incuca/vue3-toaster";
createApp(App)
.use(Toaster)
.mount("#app");Usage in your components with Options API
this.$toast.show(message, { ...options });
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 toasts after 3000ms
setTimeout(this.$toast.clear, 3000);Usage with Composition API
import { inject } from "vue";
const toast = inject("toast");
toast.show(message, { ...options });Available options
The API methods accepts these options:
| Attribute | Type | Default | Description |
|---|---|---|---|
| message | String | -- | Message text/html (required) |
| type | String | default |
success, info, warning, error or default
|
| position | String | bottom-right |
top, bottom, top-right, bottom-right,top-left or bottom-left
|
| duration | Number/Boolean | 4000 |
Visibility duration in milliseconds or false that disables duration |
| dismissible | Boolean | true |
Allow user close by clicking |
| onClick | Function | -- | Do something when user clicks |
| onClose | Function | -- | Do something after toast gets dismissed |
| queue | Boolean | false |
Wait for existing to close before showing new |
| maxToasts | Number/Boolean | false |
Defines the max of toasts showed in simultaneous |
| pauseOnHover | Boolean | true |
Pause the timer when mouse hover a toast |
| useDefaultCss | Boolean | true |
Use default css styles |
License
This project is licensed under the MIT License - see the LICENSE file for details.