Vue Toast with Tailwindcss

This is a simple vue pluign toast notifier with tailwind

Installation

npm i @k90mirzaei/vue-toast
yarn add @k90mirzaei/vue-toast

Import

import { createApp } from 'vue'
import App from './App.vue'

import toast from 'vue-toast'
import 'vue-toast/dist/index.css'

createApp(App).use(toast).mount('#app')

Usage

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
this.$toast.clear();

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
duration Number 4000 Visibility duration in milliseconds or false that disables duration
queue Boolean false Wait for existing to close before showing new
maxToasts Number or false 5 Defines the max of toasts showed in simultaneous

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
});

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

License

The MIT License (MIT). Please see License File for more information.

Support

This project needs a ⭐️ from you. Don’t forget to leave a star ⭐️

GitHub

View Github