vue-toastify-next

Framework-agnostic notification library for Vue 3 and Laravel Inertia

✨ Features

• 🚀 Framework-Agnostic: Core logic works without any framework dependencies
• ⚡ Simple API: notificationManager.success('Title')
• 🎨 Clean Design: Modern notification UI with smooth animations
• 📍 6 Positions: top/bottom left/center/right placement
• ⏳ Auto-Close: Configurable timing with progress indicators
• 🧩 TypeScript: Full type safety with strict mode
• 🌳 Tree-Shakable: Import only what you need
• 🔧 Multiple Frameworks: Vue 3, Laravel Inertia support

📦 Installation

npm install vue-toastify-next
# or
yarn add vue-toastify-next
# or
pnpm add vue-toastify-next

🚀 Quick Start

Vue 3 (Standalone)

import { createApp } from 'vue';
import App from './App.vue';
import { createVueNotificationPlugin } from 'vue-toastify-next';
import 'vue-toastify-next/style.css';

const app = createApp(App);
app.use(createVueNotificationPlugin());
app.mount('#app');

<script setup lang="ts">
import { useNotification } from 'vue-toastify-next';
import NotificationContainer from 'vue-toastify-next/vue';

const notification = useNotification();

const showSuccess = () => {
  notification.success('Operation completed successfully!');
};
</script>

<template>
  <div>
    <button @click="showSuccess">Show Success</button>
    <NotificationContainer />
  </div>
</template>

Laravel Inertia

// app.js
import { createInertiaApp } from '@inertiajs/vue3';
import { createVueNotificationPlugin } from 'vue-toastify-next';
import 'vue-toastify-next/style.css';

createInertiaApp({
  resolve: (name) => require(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(createVueNotificationPlugin())
      .mount(el);
  },
});

<!-- Layout -->
<template>
  <main>
    <slot />
  </main>
  <NotificationContainer />
</template>

<script setup>
import { NotificationContainer } from 'vue-toastify-next';
</script>

💬 API Reference

NotificationManager

import { NotificationManager } from 'vue-toastify-next';

const manager = new NotificationManager();

// Show notifications
manager.success('Success message');
manager.error('Error message');
manager.warning('Warning message');
manager.info('Info message');

// Custom options
manager.success('Custom notification', {
  position: 'bottom-right',
  autoClose: 5000,
  progress: false,
});

// Set global defaults
manager.setDefaults({
  position: 'top-right',
  autoClose: 4000,
});

// Manual control
const notifications = manager.getNotifications();
manager.remove(notificationId);
manager.clear();

Vue Composable

import { useNotification } from 'vue-toastify-next';

const notification = useNotification();

// All methods available
notification.success('Success!');
notification.error('Error!');
notification.warning('Warning!');
notification.info('Info!');

⚙️ Configuration Options

| Option | Type | Default | Description | | ----------- | ------------------------------------------------------------------------------------------------- | -------------- | ------------------------------------------- | | position | "top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right" | "top-center" | Notification placement | | autoClose | number \| false | 3000 | Auto close delay (ms) or false to disable | | progress | boolean | true | Show bottom progress bar |

vue-toastify-next