Vue Toastify Mini

A lightweight toast notification library for Vue 3 and TypeScript.

Features

• 🚀 Simple and lightweight
• 🎨 Customizable themes (light/dark)
• 📱 Multiple positions support
• ⏱️ Auto-close with progress bar
• 🔄 Promise-based toasts
• 🎭 Custom component support
• 🌓 Light and dark themes
• 🎬 Smooth animations (fade/slide)

Installation

npm install vue-toastify-mini

or

yarn add vue-toastify-mini

Usage

Register as a plugin (recommended)

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import ToastifyMini from 'vue-toastify-mini'
import 'vue-toastify-mini/dist/vue-toastify-mini.css'

const app = createApp(App)

app.use(ToastifyMini, {
  maxToasts: 3,
  defaultPosition: 'top-right',
  defaultDuration: 3000,
  defaultTheme: 'light'
})

app.mount('#app')

Use in components

<script setup lang="ts">
import { useToastify } from 'vue-toastify-mini'

const toast = useToastify()

function showToast() {
  toast.success('This is a success message!', {
    position: 'top-right',
    duration: 3000,
    theme: 'light'
  })
}
</script>

<template>
  <button @click="showToast">Show Toast</button>
</template>

Global instance

If you registered the plugin, you can access the toast instance globally:

<script setup lang="ts">
// Access the global toast instance
function showToast() {
  // @ts-ignore - TypeScript doesn't know about $toast
  this.$toast.success('This is a success message!')
}
</script>

API

Toast Types

// Success toast
toast.success(message, options)

// Error toast
toast.error(message, options)

// Info toast
toast.info(message, options)

// Warning toast
toast.warning(message, options)

// Custom component toast
toast.custom(component, options)

// Promise-based toast
toast.promise(promise, {
  loading: 'Loading...',
  success: 'Success!',
  error: 'Error!',
  options: { /* toast options */ }
})

Toast Options

interface ToastOptions {
  // Position of the toast
  position?: 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left';
  
  // Duration in milliseconds before auto-closing (0 to disable)
  duration?: number;
  
  // Whether to show close button
  closeButton?: boolean;
  
  // Custom icon component or string
  icon?: Component | string;
  
  // Theme of the toast
  theme?: 'light' | 'dark';
  
  // Animation type
  animation?: 'fade' | 'slide';
  
  // Custom CSS class for the toast
  className?: string;
  
  // Callback function when toast is closed
  onClose?: () => void;
  
  // Callback function when toast is clicked
  onClick?: () => void;
}

Container Options

When registering the plugin, you can configure the container:

app.use(ToastifyMini, {
  // Maximum number of toasts per position
  maxToasts: 3,
  
  // Default position for toasts
  defaultPosition: 'top-right',
  
  // Default duration for toasts
  defaultDuration: 3000,
  
  // Default theme for toasts
  defaultTheme: 'light'
})

Toast Management

// Dismiss a specific toast by ID
const id = toast.success('Message')
toast.dismiss(id)

// Dismiss all toasts
toast.dismissAll()

Customization

Custom Components

You can use custom Vue components as toast content:

const CustomComponent = {
  template: `
    <div>
      <h3>Custom Component</h3>
      <p>This is a custom component toast!</p>
      <button @click="$emit('action')">Click me</button>
    </div>
  `,
  setup() {
    return {
      action: () => {
        alert('Custom action triggered!')
      }
    }
  }
}

toast.custom(CustomComponent, {
  position: 'top-center',
  duration: 0, // Won't auto-close
  closeButton: true
})

Promise-based Toasts

Show different toasts based on promise state:

const fetchData = async () => {
  // Your async operation
  return await api.getData()
}

toast.promise(fetchData(), {
  loading: 'Loading data...',
  success: 'Data loaded successfully!',
  error: 'Failed to load data!',
  options: {
    position: 'bottom-center'
  }
})

License

MIT