@incuca/vue3-toaster

Lightweight toast-notification plugin for Vue 3
5,317 5
vue vue3 toast notification snackbar toaster
Install
npm install @incuca/vue3-toaster
Latest Version:1.1.1
Vue:3
License:MIT
Last Updated:Jun 28, 2022
Links: GitHub  ·  npm
Maintainer: victorotavio

Vue3 Toaster

Lightweight toast-notification plugin for Vue 3

Installation

npm install @incuca/vue3-toaster

Usage

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.

Related Packages

@meforma/vue-toaster

Vue.js toaster notification

217,174 192
notification toast toaster vue vue3 toastify
cincin-vue

🥂 Vue bindings for cincin: headless composables, primitives, ready-to-use skin

1,694 1
snackbar toast toaster vue headless notifications
@datagouv/vue-toaster

Vue 3 toaster notification

859 0
notification toast toaster vue vue3 toastify
ftt-vue-components

some components for vuetify3/element-plus/... with vue3.

777
notification snackbar toast components vuetify vuetify-message
@rozie-ui/toast-vue

Idiomatic Vue headless, accessible toast / notification host (queue, auto-dismis...

1,675 1
notification snackbar toast toaster vue accessibility aria component headless rozie +1

Version History

Version Released Vue License
1.1.1 ^3.0.6 MIT
1.1.0 ^3.0.6 MIT
1.0.0 ^3.0.6 MIT