0.1.3 • Published 3 years ago

vue-lite-toast v0.1.3

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

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:

AttributeTypeDefaultDescription
messageString--Message text/html (required)
typeStringinfoOne of success, info, warning, error
durationNumber2500Visibility duration in milliseconds
onCloseFunction--Do something after toast gets dismissed
lockBooleanfalsePrevent 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