@datagouv/vue-toaster
v2.4.5
Published
Vue 3 toaster notification
Downloads
56
Readme
Vue Toaster
Vue.js toast notification plugin for vue 3
Installation
# yarn
yarn add @conciergerie.dev/vue-toaster
# npm
npm install --save-dev @conciergerie.dev/vue-toaster
Import
You can install Toaster so it's usable globally:
// In you main.js
import Toaster from "@conciergerie.dev/vue-toaster";
createApp(App).use(Toaster).mount("#app");
You can also import Toaster locally:
import { createToaster } from "@conciergerie.dev/vue-toaster";
const toaster = createToaster({ /* options */ });
toaster.show(`Hey! I'm here`);
Usage
// this.$toast.show(message, {/* options */});
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 toast after 3000ms
setTimeout(this.$toast.clear, 3000);
Available options
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
|
| position | String | bottom-right
| One of top
, bottom
, top-right
, bottom-right
,top-left
, bottom-left
|
| duration | Number or false | 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 or false | false
| Defines the max of toasts showed in simultaneous |
| pauseOnHover | Boolean | true
| Pause the timer when mouse on over a toast |
| useDefaultCss | Boolean | true
| User default css styles |
API methods
show(message, ?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
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
});
success(message,?options)
There are some proxy methods to make it more readable. The same rule for error
, info
and warning
methods
this.$toast.success("Profile saved.", {
// optional options Object
});
Global options
You can set options for all the instances during plugin initialization
app.use(Toaster, {
// 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",
});
How to execute example
Clone the project and run:
cd vue-toaster-example
npm install
npm run dev
License
MIT License