@datagouv/vue-toaster

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