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