vue-toastification

Light, easy, and beautiful toast notifications for Vue 3 — highly configurable with smooth animations and minimal setup.

vue-toastification

Vue

Light, easy, and beautiful toast notifications for Vue 3 — highly configurable with smooth animations and minimal setup.

npm GitHub Docs

Fit

Bundle (gzip)

6.0 kB

19.1 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Vue apps need transient notifications for user feedback, but building a reusable, position-aware, auto-dismissing toast system from scratch requires a shared state service, teleport portals, and animation logic.

What It Does

vue-toastification registers as a Vue plugin and provides a useToast() composable. Call toast.success(), toast.error(), or pass a Vue component as the toast body. Toasts stack, auto-dismiss, and support click-to-close — fully customizable via CSS variables.

Installation

bash

npm install vue-toastification

Usage Example

typescript

// main.ts
import Toast from 'vue-toastification';
import 'vue-toastification/dist/index.css';
app.use(Toast, { position: 'top-right', timeout: 3000 });

vue

<script setup lang="ts">
import { useToast } from 'vue-toastification';

const toast = useToast();

function save() {
  toast.success('Settings saved!');
}
</script>

Related packages

element-plusVue

A complete component library for Vue 3 with a clean, desktop-oriented design system.

floating-vueVue

Tooltip, popover, and dropdown directives for Vue 3 — powered by Floating UI with automatic placement and overflow detection.

naive-uiVue

Fairly complete Vue 3 UI component library — 90+ components with a TypeScript-first design and no dependency on legacy CSS frameworks.

piniaVue

The intuitive, type-safe, and lightweight state management store for Vue — the official successor to Vuex.

@tanstack/vue-queryVue

Powerful async state management for Vue — data fetching, caching, background refetching, and server state synchronization.