toasted-vue

A lightweight, customizable toast notification component for Vue 3.

Installation

npm install toasted-vue
# or
yarn add toasted-vue
# or
pnpm add toasted-vue

Usage

1. Install the plugin

In your main application entry file (e.g., main.js or main.ts):

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import Toast from 'toasted-vue'
import 'toasted-vue/style.css' // Import styles
import App from './App.vue'

const app = createApp(App)

app.use(createPinia())
app.use(Toast)

app.mount('#app')

2. Use the toast in your components

You can use the toast object for specific types, or the toasted helper for handling responses.

<script setup>
import { toast, toasted } from 'toasted-vue'

function showSuccess() {
  toast.success('Operation successful!')
}

function showError() {
  toast.error('Something went wrong.')
}

function handleLogin(response) {
  // Usage: toasted(condition, successMessage, errorMessage)
  toasted(response.success, "Successfully logged in", response.error)
}
</script>

<template>
  <button @click="showSuccess">Show Success</button>
  <button @click="showError">Show Error</button>
  <button @click="handleLogin({ success: true })">Test Login Success</button>
  <button @click="handleLogin({ success: false, error: 'Invalid credentials' })">Test Login Error</button>
</template>

Types

• success: Green background, white text.
• error: Yellow background, red border (default).

License

MIT