Skip to content

Latest commit

 

History

History
127 lines (91 loc) · 3.77 KB

README.md

File metadata and controls

127 lines (91 loc) · 3.77 KB
Raw

Vue Toaster

Vue.js toast notification plugin for vue 3

Installation

# yarn
yarn add @devzatokio/vue-toaster

# npm
npm install @devzatokio/vue-toaster

Import

You can install Toaster so it's usable globally:

// In you main.js
// ... considering that your app creation is here
import Toaster from "@devzatokio/vue-toaster";

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

You can also import Toaster locally:

import { createToaster } from "@devzatokio/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 example; yarn install; yarn serve

License

MIT License