{"id":12609,"library":"vue-toastification","title":"Vue Toastification","description":"Vue Toastification is a versatile and highly customizable library for displaying toast notifications in Vue applications. It provides a simple, intuitive API for creating transient, dismissible messages with extensive configuration options for appearance, positioning, and behavior. The library currently offers a stable version 1.x (e.g., 1.7.14) for Vue 2, and a significant rewrite in version 2.x (currently in release candidate phase) specifically for Vue 3, which fully embraces the Composition API and a global event listener model. This design allows for easier integration and usage outside of traditional Vue components. Vue Toastification is actively maintained, with a focus on delivering robust SSR support, advanced customization through custom components, and a modern, Composition API-first approach in its upcoming major release. It differentiates itself with features like swipe-to-close, programmatic control over toasts, and comprehensive styling capabilities.","status":"active","version":"1.7.14","language":"javascript","source_language":"en","source_url":"https://github.com/Maronato/vue-toastification","tags":["javascript","vue","notification","toast","typescript"],"install":[{"cmd":"npm install vue-toastification","lang":"bash","label":"npm"},{"cmd":"yarn add vue-toastification","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-toastification","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency for all versions. v1.x requires Vue 2, v2.x requires Vue 3.","package":"vue","optional":false}],"imports":[{"note":"This is the default export for the plugin registration. Requires importing the CSS separately. Version 2.x is designed for Vue 3's `app.use`, while v1.x uses `Vue.use`.","wrong":"const Toast = require('vue-toastification'); // CommonJS import is not officially supported and can lead to issues, especially in Vue 3/ESM environments.","symbol":"Toast","correct":"import Toast from 'vue-toastification';\nimport 'vue-toastification/dist/index.css';\n// In Vue 3 main.ts\ncreateApp(App).use(Toast, { /* options */ });\n// In Vue 2 main.js\nVue.use(Toast, { /* options */ });"},{"note":"Introduced in v2 for Vue 3's Composition API, providing a reactive interface to manage toasts from any component or outside. For Nuxt, a specific import path `vue-toastification/composition/nuxt` is often required for correct functionality.","wrong":"import useToast from 'vue-toastification'; // Not a default export.\nconst toast = require('vue-toastification').useToast; // CommonJS + named export issues.\nimport { useToast } from 'vue-toastification/composition/nuxt'; // Use this specific path ONLY when in Nuxt Composition API context, otherwise use the main package path.","symbol":"useToast","correct":"import { useToast } from 'vue-toastification';\n// Inside a Vue 3 component setup() or <script setup>\nconst toast = useToast();\ntoast.success('Message');"},{"note":"Named export for predefined toast positions. Often used in the global plugin options.","wrong":"import POSITION from 'vue-toastification'; // Not a default export.","symbol":"POSITION","correct":"import { POSITION } from 'vue-toastification';\n// ... in plugin options\napp.use(Toast, { position: POSITION.TOP_RIGHT });"}],"quickstart":{"code":"import { createApp, h } from 'vue';\nimport App from './App.vue';\nimport Toast, { POSITION, TYPE } from 'vue-toastification';\nimport 'vue-toastification/dist/index.css';\n\nconst app = createApp(App);\n\napp.use(Toast, {\n  position: POSITION.BOTTOM_RIGHT,\n  timeout: 3000,\n  closeOnClick: true,\n  pauseOnFocusLoss: true,\n  pauseOnHover: true,\n  draggable: true,\n  draggablePercent: 0.6,\n  showCloseButtonOnHover: false,\n  hideProgressBar: false,\n  closeButton: 'button',\n  icon: true,\n  rtl: false,\n  maxToasts: 5,\n  newestOnTop: true,\n});\n\napp.mount('#app');\n\n// Inside your App.vue or any other component's <script setup>\n// <template>\n//   <div>\n//     <button @click=\"showSuccessToast\">Show Success</button>\n//     <button @click=\"showErrorToast\">Show Error</button>\n//     <button @click=\"showCustomComponentToast\">Show Custom Component Toast</button>\n//   </div>\n// </template>\n\n// <script setup lang=\"ts\">\n// import { useToast } from 'vue-toastification';\n\n// const toast = useToast();\n\n// const showSuccessToast = () => {\n//   toast.success('Your changes have been saved!');\n// };\n\n// const showErrorToast = () => {\n//   toast.error('An error occurred. Please try again.');\n// };\n\n// const showCustomComponentToast = () => {\n//   const CustomToast = h('div', { class: 'my-custom-toast' }, [\n//     h('h4', 'Custom Title'),\n//     h('p', 'This toast is rendered from a custom component!'),\n//     h('button', { onClick: () => toast.clear() }, 'Clear All Toasts')\n//   ]);\n//   toast(CustomToast, {\n//     type: TYPE.INFO,\n//     timeout: false, // Make it persistent\n//     closeButton: false,\n//   });\n// };\n// </script>","lang":"typescript","description":"This quickstart demonstrates the setup of `vue-toastification` v2.x as a Vue 3 plugin and shows how to trigger different types of toasts, including custom component toasts, using the `useToast` Composition API hook."},"warnings":[{"fix":"For Vue 3 projects, install `vue-toastification@next` (or a specific v2.x release candidate) and follow its Vue 3-specific documentation for plugin registration (`app.use`) and Composition API usage (`useToast`). For Vue 2 projects, stick to `vue-toastification@^1.x`.","message":"Vue Toastification v2.x is a complete rewrite targeting Vue 3 exclusively. It is not compatible with Vue 2 applications. Attempting to use v1.x with Vue 3, or v2.x with Vue 2, will result in build errors or runtime failures.","severity":"breaking","affected_versions":">=2.0.0-rc.1, <1.x for Vue 3"},{"fix":"Replace `/` with `math.div()` for division operations in your Sass code. Ensure you ` @use \"sass:math\";` at the top of your SCSS files. You might need to adjust variable overrides to accommodate these changes.","message":"The Sass division operator `/` is deprecated and will be removed in Dart Sass 2.0.0. If your project uses Sass and overrides `vue-toastification`'s SCSS variables (e.g., for custom themes), you might encounter deprecation warnings or build errors with newer Sass versions.","severity":"breaking","affected_versions":">=1.7.12, >=2.0.0-rc.2"},{"fix":"When using with SSR frameworks like Nuxt, ensure that `vue-toastification` is loaded as a client-only plugin. In Nuxt 3, this often means creating a plugin with a `.client.ts` suffix or wrapping toast-related components in `<ClientOnly>` tags.","message":"Vue Toastification is primarily a client-side library and does not fully support Server-Side Rendering (SSR). Directly using `useToast` or global `$toast` instances during SSR can lead to `ReferenceError: HTMLElement is not defined` or `window is not defined` errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For Nuxt Composition API, specifically import `useToast` from `vue-toastification/composition/nuxt`. Alternatively, provide the toast instance via Nuxt's plugin system and inject it (e.g., `$toast`) in components. Ensure `vue-toastification` is transpiled in your `nuxt.config.js` if issues persist (`build.transpile: ['vue-toastification']`).","message":"In Nuxt 3, directly importing `useToast` from `vue-toastification` may work in development but fail in production builds due to ESM/CommonJS compatibility issues, resulting in 'Named export 'useToast' not found' errors.","severity":"gotcha","affected_versions":">=2.0.0-rc.1 (Nuxt 3)"},{"fix":"For Vue 2.7.0+ projects, it is generally recommended to use the standard plugin registration (`Vue.use(Toast)`) and `this.$toast` interface, rather than trying to use `useToast` or other Composition API features from `vue-toastification` v1.x. For Composition API usage, migrating to `vue-toastification` v2.x (which requires Vue 3) is the recommended path.","message":"Using version 1.7.14 with Vue 2.7.0+ might cause issues with the Composition API implementation, as Vue 2.7.0+ now includes its own Composition API. This can lead to conflicts or unexpected behavior if both are attempting to use different Composition API contexts.","severity":"gotcha","affected_versions":"1.7.14 (with Vue 2.7.0+)"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `vue-toastification` is configured to run only on the client side. In Nuxt, register it as a client-only plugin (e.g., `~/plugins/toast.client.ts`) or wrap components using toasts in `<ClientOnly>`.","cause":"Attempting to use `vue-toastification` in an SSR environment (e.g., Nuxt) without proper client-side guarding.","error":"ReferenceError: HTMLElement is not defined"},{"fix":"For Nuxt 3, import `useToast` specifically from `vue-toastification/composition/nuxt`. In other ESM environments, ensure your build tool correctly handles named exports from the library.","cause":"Incorrect import path for `useToast` in a Nuxt 3 project, or CommonJS module interop issues in ESM-only build environments.","error":"Named export 'useToast' not found"},{"fix":"Update your Sass files to use `math.div()` for division operations, ensuring ` @use \"sass:math\";` is present. If the warning comes from `vue-toastification`'s internals, ensure you are on a recent version that has addressed this (v1.7.12, v2.0.0-rc.2 fixed internal usages).","cause":"Your project's Sass configuration, or an older version of `vue-toastification`'s internal SCSS, uses the deprecated `/` operator for division.","error":"DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0."},{"fix":"Upgrade to `vue-toastification` v2.x (e.g., `npm install vue-toastification@next`) if you are using Vue 3. Version 1.x is strictly for Vue 2.","cause":"Attempting to use `vue-toastification` v1.x in a Vue 3 project. `vue-toastification` v1.x expects a default export for Vue, which is not how Vue 3 bundles its ESM.","error":"\"default\" is not exported by \".../node_modules/vue/dist/vue.runtime.esm-bundler.js\", imported by \".../node_modules/vue-toastification/dist/esm/index.js\"."}],"ecosystem":"npm"}