vue-lite-toast

Vue.js toast notification plugin for vue 3

Installation

# npm
npm install vue-lite-toast

Import

// In you main.js
// ... considering that your app creation is here
import Toast from "@vue-lite-toast";

createApp(App).use(Toast).mount("#app");

Usage

// this.$toast.open(message, {/* options */});
this.$toast.open(`Hello world`);
this.$toast.success(`Hello world`);
this.$toast.error(`Hello world`);
this.$toast.warning(`Hello world`);
this.$toast.info(`Hello world`);

Available options

The API methods accepts these options:

Attribute	Type	Default	Description
message	String	--	Message text/html (required)
type	String	info	One of success, info, warning, error
duration	Number	2500	Visibility duration in milliseconds
onClose	Function	--	Do something after toast gets dismissed
lock	Boolean	false	Prevent users from manipulating pages during toast

API methods

open(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.open("Hello!");

// Can accept an Object of options.
// If yout don't pass options, the default toast will be showed

this.$toast.open("Something went wrong!", {
  type: "error",
  // all of other options may go here
});

this.$toast.open("Something stay longer!", {
  duration: 4000,
  // 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("Congratulations on your success", {
  // optional options Object
});

License

MIT License