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