Vue Toast with Tailwindcss

This is a simple vue pluign toast notifier with tailwind


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


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

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



this.$`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.$`Hey! I'm here`);

// Close all opened

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

// Can accept an Object of options.
// If yout don't pass options, the default toast will be showed
this.$"Something went wrong!", {
  type: "error",
  // all of other options may go here


Please see CONTRIBUTING for details.

Security Vulnerabilities

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



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


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


View Github