{"id":14964197,"url":"https://github.com/maronato/vue-toastification","last_synced_at":"2025-05-13T21:04:09.395Z","repository":{"id":39600626,"uuid":"214525695","full_name":"Maronato/vue-toastification","owner":"Maronato","description":"Vue notifications made easy!","archived":false,"fork":false,"pushed_at":"2024-02-27T09:38:14.000Z","size":10804,"stargazers_count":3289,"open_issues_count":66,"forks_count":151,"subscribers_count":16,"default_branch":"next","last_synced_at":"2025-04-28T12:00:03.379Z","etag":null,"topics":["composition-api","notifications","nuxt","toast","typescript","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://vue-toastification.maronato.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Maronato.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-11T20:44:26.000Z","updated_at":"2025-04-26T10:27:23.000Z","dependencies_parsed_at":"2024-02-27T10:56:03.523Z","dependency_job_id":"60f814b4-6907-4564-a090-2834f5bf8e8e","html_url":"https://github.com/Maronato/vue-toastification","commit_stats":{"total_commits":249,"total_committers":9,"mean_commits":"27.666666666666668","dds":"0.14457831325301207","last_synced_commit":"b34ea31f76cb3204fcdd047c0214df77850afefa"},"previous_names":[],"tags_count":54,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Maronato%2Fvue-toastification","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Maronato%2Fvue-toastification/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Maronato%2Fvue-toastification/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Maronato%2Fvue-toastification/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Maronato","download_url":"https://codeload.github.com/Maronato/vue-toastification/tar.gz/refs/heads/next","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254028281,"owners_count":22002220,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["composition-api","notifications","nuxt","toast","typescript","vue","vuejs"],"created_at":"2024-09-24T13:32:43.447Z","updated_at":"2025-05-13T21:04:09.343Z","avatar_url":"https://github.com/Maronato.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Toastification\n[![NPM](https://flat.badgen.net/npm/v/vue-toastification/next)](https://www.npmjs.com/package/vue-toastification/next)  [![Bundle](https://flat.badgen.net/bundlephobia/minzip/vue-toastification)](https://bundlephobia.com/result?p=vue-toastification@next)\n[![Vue 3](https://img.shields.io/badge/Vue-3-green)](https://img.shields.io/badge/Vue-3-green)\n\n[![Build Status](https://travis-ci.com/Maronato/vue-toastification.svg?branch=master)](https://travis-ci.com/Maronato/vue-toastification) [![codecov](https://codecov.io/gh/Maronato/vue-toastification/branch/master/graph/badge.svg)](https://codecov.io/gh/Maronato/vue-toastification) \n\n![vt](https://i.imgur.com/i2PMcTq.gif)\n\n\nLight, easy and beautiful toasts!\n\nWanna try it out? Check out the [live demo](https://maronato.github.io/vue-toastification/)!\n\n\n**Attention!** These are the docs for Vue Toastification v2, which is **only** compatible with Vue 3+\n\nIf you are using Vue 2, check out [Vue Toastification v1](https://github.com/Maronato/vue-toastification/tree/master)\n\n- [Vue Toastification](#vue-toastification)\n  - [Features](#features)\n  - [Demo](#demo)\n  - [Installation](#installation)\n  - [Usage](#usage)\n    - [Plugin registration](#plugin-registration)\n    - [Creating toasts](#creating-toasts)\n    - [Using with Vuex or outside components](#using-with-vuex-or-outside-components)\n    - [Positioning the Toast](#positioning-the-toast)\n    - [Toast types](#toast-types)\n    - [Setting the toast timeout](#setting-the-toast-timeout)\n    - [Using a custom component](#using-a-custom-component)\n      - [Render a component](#render-a-component)\n      - [Close the toast using a custom component](#close-the-toast-using-a-custom-component)\n      - [Render a JSX component](#render-a-jsx-component)\n      - [Render a component with props and events](#render-a-component-with-props-and-events)\n      - [Access global components and plugins inside toasts](#access-global-components-and-plugins-inside-toasts)\n    - [Dismiss toasts programmatically](#dismiss-toasts-programmatically)\n    - [Update toasts programmatically](#update-toasts-programmatically)\n    - [Clear all toasts](#clear-all-toasts)\n    - [Styling](#styling)\n      - [Custom toast classes](#custom-toast-classes)\n      - [Custom toast container classes](#custom-toast-container-classes)\n      - [Override SCSS variables](#override-scss-variables)\n    - [Right to left support](#right-to-left-support)\n    - [Transitions](#transitions)\n    - [Custom transitions](#custom-transitions)\n      - [Named transitions](#named-transitions)\n      - [Transition classes](#transition-classes)\n    - [Toast Icons](#toast-icons)\n      - [Disabling icons](#disabling-icons)\n      - [Using custom icons](#using-custom-icons)\n    - [Close Button](#close-button)\n      - [Hiding the close button](#hiding-the-close-button)\n      - [Only show the close button on hover](#only-show-the-close-button-on-hover)\n      - [Custom close button component](#custom-close-button-component)\n      - [Custom close button classes](#custom-close-button-classes)\n    - [Presetting default toast options per type](#presetting-default-toast-options-per-type)\n    - [Updating default options](#updating-default-options)\n    - [Custom toast filters](#custom-toast-filters)\n      - [`filterBeforeCreate`](#filterbeforecreate)\n      - [`filterToasts`](#filtertoasts)\n    - [Custom toast containers](#custom-toast-containers)\n      - [Existing nodes as toast containers](#existing-nodes-as-toast-containers)\n      - [Async nodes as toast containers](#async-nodes-as-toast-containers)\n  - [Advanced patterns](#advanced-patterns)\n    - [Creating new instances](#creating-new-instances)\n    - [Creating interfaces to existing instances](#creating-interfaces-to-existing-instances)\n    - [Manually providing interfaces](#manually-providing-interfaces)\n  - [API](#api)\n    - [Plugin registration (app.use)](#plugin-registration-appuse)\n    - [Toast (toast)](#toast-toast)\n      - [Toast Content Object](#toast-content-object)\n      - [Toast Options Object](#toast-options-object)\n- [Updating from v1.x](#updating-from-v1x)\n  - [Creating toasts](#creating-toasts-1)\n  - [Deprecated options](#deprecated-options)\n- [Acknowledgements](#acknowledgements)\n- [License](#license)\n\n\n\n## Features\n\n- **Vue 3** compatible!\n- Generic registration allows it to be used inside any app, even React!\n- Fully written in Typescript with full types support\n- RTL support\n- Easy to set up for real, you can make it work in less than 10sec!\n- Customize everything\n- Swipe to close 👌\n- Use your custom components or JSX as the toast body for endless possibilities!\n- Create custom experiences with `onClose`, `onClick`, and `onMounted` hooks\n- Custom toast filtering and enqueueing with lifecycle hooks\n- Remove toasts programmatically\n- Update toasts programmatically\n- Define behavior per toast\n- Pause toast when hovering and when the window loses focus 👁\n- Fancy progress bar to display the remaining time\n- Use your themes and animations easily\n- And much more!\n\n\n## Demo\n\nNeed some more convincing? Check out the [demo](https://maronato.github.io/vue-toastification/)\n\n\nYou can also check some [examples](https://github.com/Maronato/vue-toastification/tree/master/examples).\n\n\n## Installation\n\n```\n$ yarn add vue-toastification@next\n$ npm install --save vue-toastification@next\n```\n\n\u003e **Using Vue 2?** You should install [Vue Toastification v1](https://github.com/Maronato/vue-toastification/tree/master) instead.\n\n\n## Usage\n\n### Plugin registration\n\nAdd it as a plugin to your app:\n```javascript\nimport { createApp } from \"vue\";\nimport Toast from \"vue-toastification\";\n// Import the CSS or use your own!\nimport \"vue-toastification/dist/index.css\";\n\nconst app = createApp(...);\n\nconst options = {\n    // You can set your default options here\n};\n\napp.use(Toast, options);\n```\n\nOr, if you are using Typescript:\n```javascript\nimport { createApp } from \"vue\";\nimport Toast, { PluginOptions } from \"vue-toastification\";\n// Import the CSS or use your own!\nimport \"vue-toastification/dist/index.css\";\n\nconst app = createApp(...);\n\nconst options: PluginOptions = {\n    // You can set your default options here\n};\n\napp.use(Toast, options);\n```\n\n### Creating toasts\n\nTo create toasts, get a *toast interface* by calling `useToast` from within a component.\n\n```html\n\u003cscript\u003e\n  import { useToast } from \"vue-toastification\";\n\n  export default {\n    setup() {\n      // Get toast interface\n      const toast = useToast();\n\n      // Use it!\n      toast(\"I'm a toast!\");\n\n      // or with options\n      toast.success(\"My toast content\", {\n        timeout: 2000\n      });\n      // These options will override the options defined in the \"app.use\" plugin registration for this specific toast\n\n      // Make it available inside methods\n      return { toast }\n    },\n\n    methods: {\n      myMethod() {\n\n        // Since you returned `toast` from setup(), you can access it now\n        this.toast.info(\"I'm an info toast!\");\n      }\n    }\n  }\n\u003c/script\u003e\n```\n\n### Using with Vuex or outside components\nBy default, Vue Toastification creates the plugin using a global event bus, so all you need to do to use it outside your components is to call `useToast()`.\n\n```js\n// store.js\nimport { createStore } from 'vuex'\nimport { useToast } from 'vue-toastification'\n\nconst toast = useToast()\n\nconst store = createStore({\n  state: {\n    count: 0\n  },\n  mutations: {\n    increment (state) {\n      state.count++\n    }\n  },\n  actions: {\n    increment (context) {\n      context.commit('increment')\n      toast.success(\"incremented!\")\n    }\n  }\n})\n```\n\n### Positioning the Toast\n\nBy default, the toasts will be displayed at the top right corner of your screen, but you can set it manually using the `position` option.\n\nYou can use the type definitions or one of the allowed values: **top-right**, **top-center**, **top-left**, **bottom-right**, **bottom-center**, **bottom-left**.\n\n```javascript\nimport Toast, { POSITION } from \"vue-toastification\";\n\napp.use(Toast, {\n    // Setting the global default position\n    position: POSITION.TOP_LEFT\n});\n\n\n// Or set it per toast\ntoast(\"I'm a toast\", { position: POSITION.BOTTOM_LEFT });\n```\n\n\n\n### Toast types\n\nDepending on the context, you may want to use toasts of different colors. You can easily do that by setting the type of toast to be displayed.\n\n```javascript\ntoast(\"Default toast\");\ntoast.info(\"Info toast\");\ntoast.success(\"Success toast\");\ntoast.error(\"Error toast\");\ntoast.warning(\"Warning toast\");\n\n// You can also set the type programmatically when calling the default toast\nimport { TYPE } from \"vue-toastification\";\n\ntoast(\"Also a success toast\", {\n    type: TYPE.SUCCESS  // or \"success\", \"error\", \"default\", \"info\" and \"warning\"\n});\n```\n\nSetting the type only works when using `toast`, it won't work when registering the plugin with `app.use`.\n\n### Setting the toast timeout\n\nYou can set for how long the toast will remain on the screen (in milliseconds) using the `timeout` option or disable it altogether by setting it to `false`\n\n```js\n// 1 second\ntoast(\"Quick toast\", { timeout: 1000 });\n\n// Or make the toast permanent until manually closed\ntoast(\"Persistent toast\", { timeout: false })\n\n// Or set it when registering the plugin\napp.use(Toast, { timeout: 2000 });\n```\n\n### Using a custom component\nPassing strings as the toast content is not enough? You can render anything inside the toast using custom components! Vue Toastification accepts both Vue Components and JSX templates as parameters.\n\nWhen using custom components, the prop `toastId` containing the toast ID is always passed by default. Also, an event listener for `close-toast` is attached, so you can close the toast programmatically by emitting it from inside the component.\n\nSee an example with custom components in action:\n\n[![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-template-w2w2c?fontsize=14)\n\n#### Render a component\nTo use a Single File Component as content just pass it to the toast:\n\n```js\nimport MyComponent from \"./MyComponent.vue\";\n\n\ntoast(MyComponent);\n```\n\n#### Close the toast using a custom component\nWhen using custom components it is also possible to close the toast from within.\n\nTo do that, just emit the `close-toast` event\n\n```js\n// MyComponent.vue\n\n\u003ctemplate\u003e\n    \u003cbutton @click=\"$emit('close-toast')\"\u003eClose Toast\u003c/button\u003e\n\u003c/template\u003e\n\n\n// OtherFile.vue\nimport MyComponent from \"./MyComponent.vue\";\n\n\n// This toast will be closed when the button inside it is clicked\ntoast(MyComponent);\n```\n\n\n#### Render a JSX component\nSometimes you won't want to create a whole component just for a toast. In those cases, you can pass a JSX template to the Toast for it to render as a component\n\n\u003e Note: Read [this](https://vuejs.org/v2/guide/render-function.html#JSX) to learn how to enable JSX inside of Vue\n\n```js\nconst myJSX = (\n    \u003cdiv\u003e\n        \u003ch1\u003eMy Title\u003c/h1\u003e\n        \u003cspan\u003eMy text\u003c/span\u003e\n    \u003c/div\u003e\n);\n\n// Vue Toastification will generate the appropriate render function automatically.\ntoast(myJSX);\n```\n\n\n#### Render a component with props and events\n\nUsually, it is not enough to just render a simple component and you'll need to handle events or pass props. You can do that too!\n\nJust pass the content in the format\n\n```js\n{\n    component: Component,\n    props:  {\n        propName: propValue  // Optional\n    },\n    listeners: {\n        eventName: eventHandler  // Optional\n    }\n}\n```\n\nProps will be passed to the created component and the event listeners will be attached to it as well.\n\n\u003e Note: Props passed are not reactive\n\n```js\nconst content = {\n    // Your component or JSX template\n    component: MyComponent,\n\n    // Props are just regular props, but these won't be reactive\n    props: {\n        myProp: \"abc\",\n        otherProp: 123\n    },\n\n    // Listeners will listen to and execute on event emission\n    listeners: {\n        click: () =\u003e console.log(\"Clicked!\"),\n        myEvent: myEventHandler\n    }\n};\n\n\ntoast(content);\n```\n\n#### Access global components and plugins inside toasts\nWhen building custom toast components, it may be useful to access the context of your main app to use stuff that is shared globally inside it. These include things like: \n- global components such as `RouterLink`, `NuxtLink`, etc\n- global state and properties\n- custom directives\n- custom mixins\n- data from other plugins\n\nTo give Vue Toastification access to your app's context, you can set `shareAppContext` to `true` during registration.\n```ts\napp.use(Toast, {\n    shareAppContext: true,\n});\n```\n\n### Dismiss toasts programmatically\nWhen a toast is created, an ID is assigned to it. You can use it later to programmatically dismiss the toast.\n\n\nYou can also choose a custom ID (String or Number) for the toast during its creation.\n\n\n```js\n// Get the toast ID on creation\nconst toastId = toast(\"my toast\");\n\n// Dismiss it later\ntoast.dismiss(toastId);\n\n// Pass your custom ID to the toast\ntoast(\"my other toast\", { id: \"my id\" });\ntoast.dismiss(\"my id\");\n```\n\n### Update toasts programmatically\nYou can update toasts contents and props programmatically using its ID.\n\nThe method signature is `$toast.update(id, { content, options }, create)` with `content`, `options` and `create` being optional. Updates override previous values.\n\n`create` is a boolean, `false` by default. If `true`, a toast will be created if no matching toast with the `id` is found.\n\n```js\n// Get the toast ID on creation\nconst toastId = toast(\"Loading...\");\n\n// Update it later\ntoast.update(toastId, { content: \"Loaded!\" });\n\n// Pass your custom ID to the toast\ntoast(\"my other toast\", { id: \"my id\", timeout: false });\ntoast.update(\"my id\", { content: \"Finished!\", options: { timeout: 5000 } });\n```\n\n\u003e **Note**: The remaining timeout of the toast will be carried on updates. To reset the timeout, simply pass a `timeout` option during the update. It can be the same as the one set during the toast creation.\n\n\n### Clear all toasts\nYou can also dismiss all toasts at once using `clear`.\n\n```js\ntoast(\"my toast A\");\ntoast(\"my toast B\");\ntoast(\"my toast C\");\n\n// Dismiss all toasts\ntoast.clear();\n```\n\n### Styling\nThere are two ways to style your toast components. You can either add custom classes to the toast or containers and modify them using those or you can override the actual toast's SCSS when importing them.\n\n#### Custom toast classes\n```js\ntoast(\"my toast\", {\n    // For the actual toast, including different toast types:\n    toastClassName: \"my-custom-toast-class\",\n\n    // For the toast body when using strings or a custom component as content\n    bodyClassName: [\"custom-class-1\", \"custom-class-2\"]\n});\n```\n```css\n\u003cstyle\u003e\n/* When setting CSS, remember that priority increases with specificity, so don't forget to select the existing classes as well */\n\n    .Vue-Toastification__toast--default.my-custom-toast-class {\n        background-color: red;\n    }\n\n    /* Applied to the toast body when using regular strings as content */\n    .Vue-Toastification__toast-body.custom-class-1 {\n        font-size: 30px;\n    }\n\n    /* Applied to a wrapper div when using a custom component as content */\n    .Vue-Toastification__toast-component-body.custom-class-2 {\n        width: 100%;\n    }\n\u003c/style\u003e\n```\nThese can also be defined when registering the vue plugin.\n\n\u003e Note: `bodyClassName`s applied to toasts that use a custom component are not applied to the custom component itself. Instead, they are applied to a `div` that wraps the custom component.\n\n#### Custom toast container classes\nYou can also add custom classes to the toast's **containers**. Keep in mind that here **containers** refer to the 6 `div`s that contain the toasts in the 6 possible toast positions (`top-right`, `top-left`, etc).\n\nThese classes can be defined during plugin initialization.\n```js\napp.use(Toast, {\n    // Can be either a string or an array of strings\n    containerClassName: \"my-container-class\",\n});\n```\n```css\n\u003cstyle\u003e\n/* When setting CSS, remember that priority increases with specificity, so don't forget to select the existing classes as well */\n\n    /* This will only affect the top-right container */\n    .Vue-Toastification__container.top-right.my-container-class{\n        top: 10em;\n    }\n\n    /* This will affect all 6 containers */\n    .Vue-Toastification__container.my-container-class{\n        position: relative;\n    }\n\u003c/style\u003e\n```\n\n\n#### Override SCSS variables\nThere is a set of [pre defined variables](https://github.com/Maronato/vue-toastification/blob/master/src/scss/_variables.scss) that you can override to change some basic styling.\n\nIf you have an SCSS loader in your project, simply create a file overriding the defaults\n```scss\n// yourMainScssFile.scss\n\n// Override the variables or import a file that overrides them\n$vt-color-success: white;\n$vt-text-color-success: #000;\n\n// Import the regular Vue Toastification stylesheets (or create your own)\n@import \"vue-toastification/src/scss/_variables\";\n@import \"vue-toastification/src/scss/_toastContainer\";\n@import \"vue-toastification/src/scss/_toast\";\n@import \"vue-toastification/src/scss/_closeButton\";\n@import \"vue-toastification/src/scss/_progressBar\";\n@import \"vue-toastification/src/scss/_icon\";\n@import \"vue-toastification/src/scss/animations/_bounce\";\n```\n\nThen you import it when registering the plugin\n```javascript\nimport Toast from \"vue-toastification\";\n\n// The magic is here\nimport \"./yourMainScssFile.scss\";\n\napp.use(Toast);\n```\n\n### Right to left support\nRight to left layouts are also supported. It can be enabled per toast or globally through plugin options:\n```js\n// Set RTL on individual toasts\ntoast.success(\"!detrevnI\", { rtl: true });\n\n// Or globally\napp.use(Toast, {\n  rtl: true\n});\n```\n\n\n### Transitions\nVue Toastification comes with built-in transitions, but you can also customize your own.\n\nDefault Usage using the built-in bounce transition:\n```js\napp.use(Toast, {\n  transition: \"Vue-Toastification__bounce\",\n  maxToasts: 20,\n  newestOnTop: true\n});\n```\n\nSome of the currently available built-in transitions are:\n- Bounce (default): Set the transition property to \"Vue-Toastification__bounce\"\n- Fade-In / Out: Set the transition property to \"Vue-Toastification__fade\"\n- Slide-In / Out (Blurred): Set the transition property to \"Vue-Toastification__slideBlurred\"\nHowever, new ones may be added so be sure to check the [live demo](https://maronato.github.io/vue-toastification/) page for the updated list.\n\n### Custom transitions\nWhen registering the plugin you can use your custom transitions as the toasts' transitions. You can use both named transitions or the transition classes separately.\n\nVue Toastification uses [Vue's built-in transition-group components](https://vuejs.org/v2/guide/transitions.html#Overview), so read how they work before creating your own.\n\n\u003e Note: You only need to implement the `enter-active`, `leave-active` and `move` transition classes.\n\nWe'll use the following transition in our examples:\n```css\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n.fade-enter-active {\n  animation-name: fadeIn;\n  animation-duration: 750ms;\n  animation-fill-mode: both;\n}\n.fade-leave-active {\n  animation-name: fadeOut;\n  animation-duration: 750ms;\n  animation-fill-mode: both;\n}\n.fade-move {\n  transition-timing-function: ease-in-out;\n  transition-property: all;\n  transition-duration: 400ms;\n}\n```\n\n#### Named transitions\nTo setup named transitions just pass the transition name.\n\nUsing the transition defined above, we can use it like so:\n```javascript\napp.use(Toast, {\n    transition: \"fade\"\n});\n```\n\n#### Transition classes\nYou can also specify which entering, leaving and moving transitions to use. Please note that if you use custom transition classes you'll need to specify all 3 classes for it to work.\nYou can, however, use Vue Toastification's default \"bounce\" transition to fill the gaps. Its classes are `Vue-Toastification__bounce-enter-active`, `Vue-Toastification__bounce-leave-active` and `Vue-Toastification__bounce-move`.\n\nExample using a mix of `fade` and `bounce` transitions:\n```javascript\napp.use(Toast, {\n    transition: {\n        enter: \"fade-enter-active\",\n        leave: \"Vue-Toastification__bounce-leave-active\",\n        move: \"fade-move\"\n    }\n});\n```\n\n### Toast Icons\nBy default, all toasts will come with a little icon to the left representing what the message is about. These are fully customizable as you'll see.\n\n#### Disabling icons\nYou can entirely disable the icon from the toast by setting `icon: false` when either registering the plugin or creating toasts. Without the icon, the toast's content will fill its place and appear closer to the edge.\n\n```javascript\n// Disable every toast's icon by default\napp.use(Toast, {\n    icon: false\n});\n\n// Disable icons per toast\ntoast('No icon!', { icon: false });\n```\n\n#### Using custom icons\nYou can also use custom icons with the `icon` option. To do so, you'll probably need to install these icons in your app with an icon library, such as [FontAwesome](https://fontawesome.com/) or [Material Icons](https://google.github.io/material-design-icons/).\n\nYou can also install a Vue icon library with custom components, such as [Vue FontAwesome](https://github.com/FortAwesome/vue-fontawesome).\n\nUsing them varies between icon libraries. You can either override icon classes with `icon: \"my-icon-class\"`, pass a custom component / JSX, or you can set up more complex icon systems by passing an object. Let's look at the options with some examples:\n\n```javascript\n// Using Font Awesome icons\ntoast('Icons are awesome!', { icon: 'fas fa-rocket' });\n\n// Using Material Icons\ntoast('Material icons!', {\n  icon: {\n    iconClass: 'material-icons',  // Optional\n    iconChildren: 'check_circle', // Optional\n    iconTag: 'span'               // Optional\n  }\n});\n```\n\nAs you can see, we can either just pass a string or define classes, children, and tags for our icons.\n\nWhen you just pass a string, for example `fas fa-rocket`, the rendered component will look like:\n```html\n\u003ci class=\"fas fa-rocket\"\u003e\u003c/i\u003e\n```\nIf your icon library supports that, then you're good to go!\n\nOther libraries require you to define icons with [ligatures](http://alistapart.com/article/the-era-of-symbol-fonts). To support that, Vue Toastification allows you to construct your icon component through some options: `iconClass`, `iconChildren` and `iconTag`.\n\nTaking the Material Icon example from above, the rendered component would look like:\n```html\n\u003cspan class=\"material-icons\"\u003echeck_circle\u003c/span\u003e\n```\n\nBoth examples will have an extra class, `Vue-Toastification__icon`. You can see what it does [here](https://github.com/Maronato/vue-toastification/blob/master/src/scss/_icon.scss) or you can override it with your CSS classes.\n\n### Close Button\nYou can modify the toast close buttons in 3 ways:\n- Hide it\n- Use a custom component instead of the standard one\n- Add extra classes to it\n\n#### Hiding the close button\nTo hide it, simply set `closeButton` to `false` when calling the toast or setting up the plugin\n```js\ntoast('No close button', {\n  closeButton: false\n});\n```\n\n#### Only show the close button on hover\nYou can also hide the close button unless the toast is being hovered. To do so, set `showCloseButtonOnHover` to `true` when calling the toast or setting up the plugin\n\n```js\ntoast('No close button', {\n  showCloseButtonOnHover: true\n});\n```\n\n#### Custom close button component\nYou can also use custom components as close buttons. It accepts Single File Components, JSX and tag names:\n```js\ntoast('With a custom close component', {\n  closeButton: MyComponent\n});\n```\n\n#### Custom close button classes\nThe close button can be customized with custom classes. These can be either a single string or an array of strings\n\n```js\ntoast('With custom classes', {\n  closeButtonClassName: \"my-button-class\"\n});\n```\n\n### Presetting default toast options per type\nIf you want to unify the behavior throughout the application and **D**on't **R**epeat **Y**ourself, you could extract the default behavior for each type of toast.\n\n```javascript\nimport Toast, { TYPE } from \"vue-toastification\";\n\nconst options = {\n    toastDefaults: {\n        // ToastOptions object for each type of toast\n        [TYPE.ERROR]: {\n            timeout: 10000,\n            closeButton: false,\n        },\n        [TYPE.SUCCESS]: {\n            timeout: 3000,\n            hideProgressBar: true,\n        }    \n    }\n};\n\n\napp.use(Toast, options);\n```\n\n### Updating default options\nSome options are only available when registering the plugin, like `transition`, `maxToasts` and others. If you need to update those options in runtime, there is a method you can call to update the default options:\n```javascript\nconst update = {\n    transition: \"my-transition\"\n};\n\ntoast.updateDefaults(update);\n```\n\u003e Note: `updateDefaults` will do a **shallow** update on your default options.\n\nYou can use `updateDefaults` to update any of the default [API options](#plugin-registration-vueuse), but be careful as they are updated globally, so all new toasts will share the new defaults.\n\n### Custom toast filters\nSome applications require custom logic to select which toasts to display and how to display them. To solve this issue, Vue Toastification provides you with two callback functions that give you fine control of your toasts. These are `filterBeforeCreate` and `filterToasts`.\n\n#### `filterBeforeCreate`\nCalled just before toast creation, `filterBeforeCreate` allows you to edit toast props in runtime or discard toasts entirely.\n\nIt takes two parameters:\n- The new toast's [props](#toast-options-object)\n- A list of existing toasts\n\nIt must return the modified toast props, or `false` to discard the toast.\n\nExample implementation of a *preventDuplicates* feature, which prevents toasts of the same type from appearing simultaneously:\n```js\n// App.js\n\n// Prevents toasts of the same type from appearing simultaneously, discarding duplicates\nconst filterBeforeCreate = (toast, toasts) =\u003e {\n  if (toasts.filter(t =\u003e t.type === toast.type).length !== 0) {\n    // Returning false discards the toast\n    return false;\n  }\n  // You can modify the toast if you want\n  return toast;\n}\n\napp.use(Toast, { filterBeforeCreate });\n```\n\n#### `filterToasts`\nThis callback enables you to filter *created* toasts from being **rendered**. It differs from `filterBeforeCreate` by allowing you to enqueue toasts, as opposed to the former, which allows you to discard them.\n\nIt takes the list of created toasts and must return a list of toasts to be rendered. Filtered toasts may be rendered later on.\n\nAnother example of `preventDuplicates` feature that enqueues toasts instead of discarding them:\n```js\n// App.js\n\n// Enqueues toasts of the same type, preventing duplicates\nconst filterToasts = (toasts) =\u003e {\n  // Keep track of existing types\n  const types = {};\n  return toasts.reduce((aggToasts, toast) =\u003e {\n    // Check if type was not seen before\n    if (!types[toast.type]) {\n      aggToasts.push(toast);\n      types[toast.type] = true;\n    }\n    return aggToasts;\n  }, []);\n}\n\napp.use(Toast, { filterToasts });\n```\n\n### Custom toast containers\nBy default, all toasts are mounted to a `div` that is a direct child of `document.body`, but your application may require that toasts be mounted elsewhere for whatever reason. Vue Toastification allows you to do that by accepting a `container` plugin option. That option may be either an `HTMLElement` or a function that returns or resolves into an `HTMLElement`.\n\n#### Existing nodes as toast containers\nTo use an existing node, simply pass it as the argument:\n\n```js\n// App.js\n\nconst myContainer = document.querySelector('#my-container');\n\napp.use(Toast, { container: myContainer });\n```\n\nYou may also use a function that returns the node:\n\n```js\n// App.js\n\nconst getContainer = () =\u003e document.querySelector('#my-container');\n\napp.use(Toast, { container: getContainer });\n```\n\n#### Async nodes as toast containers\nSometimes your node may not exist by the time the plugin is initialized. This may happen if, for example, it is created by Vue. To dynamically mount your component, pass an async function that resolves into a node instead.\n\nThe example below uses the [Mutation Observer API](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to test for a node identifiable by the ID `toast-container`:\n\n```js\n// App.js\n\nfunction asyncGetContainer() {\n  return new Promise(resolve =\u003e {\n    const observer = new MutationObserver(function(mutations, me) {\n      const myContainer = document.getElementById(\"toast-container\");\n      if (myContainer) {\n        me.disconnect();\n        resolve(myContainer);\n      }\n    });\n    observer.observe(document, {\n      childList: true,\n      subtree: true\n    });\n  });\n}\n\napp.use(Toast, { container: asyncGetContainer });\n```\n\nWhen setting up a container this way, all calls to `toast` will still be executed successfully and the toasts will be displayed all at once when it is mounted.\n\n## Advanced patterns\nVue Toastification works by creating a separate Vue App whenever you create a fresh instance of it. This means that you can create as many instances of it as you want and then interact with them independently.\n\n### Creating new instances\nTo create a new instance, use `createToastInterface`:\n```js\nimport { createToastInterface } from \"vue-toastification\";\n\nconst myInterface = createToastInterface();\n```\n\nIt accepts all of the regular PluginOptions too:\n```js\nimport { createToastInterface } from \"vue-toastification\";\n\nconst myInterface = createToastInterface({\n  timeout: 1000\n});\n```\n\nWhen called this way, a new Vue App is created and the Vue Toastification container is attached to it. All calls to the interface methods (`myInterface.success()`, etc), will trigger toasts to appear inside the new container.\n\n### Creating interfaces to existing instances\nIf you want to reuse a Vue Toastification instance, you can provide its EventBus to `createToastInterface` and get an interface to the existing instance, without creating a new one.\n\n```js\nimport { createToastInterface, EventBus } from \"vue-toastification\";\n\n// Create a new event bus\nconst myEventBus = new EventBus();\n\n// Generate the first interface, passing your eventBus as a parameter\nconst toast = createToastInterface({\n  timeout: 1000,\n  eventBus: myEventBus,\n});\n\n// Later, generate another interface to the same instance\nconst otherToast = createToastInterface(myEventBus);\n```\n\nYou can also create interfaces to existing instances using `useToast`:\n```js\nimport { useToast } from \"vue-toastification\";\nimport { myEventBus } from \"./otherFile.js\";\n\nconst toast = useToast(myEventBus);\n```\n\n### Manually providing interfaces\nSometimes you may need to create a new Vue Toastification instance and make it available only to a subtree of components. You can do that using `provideToast`, which takes PluginOptions, creates a new instance and provides an interface to it.\n```html\n\u003c!-- Parent component --\u003e\n\u003cscript\u003e\n  import { provideToast } from \"vue-toastification\";\n\n  export default {\n    setup() {\n      provideToast({\n        timeout: 1000\n      })\n    }\n  }\n\u003c/script\u003e\n\n\u003c!-- Child components --\u003e\n\u003cscript\u003e\n  import { useToast } from \"vue-toastification\";\n\n  export default {\n    setup() {\n      const toast = useToast()\n    }\n  }\n\u003c/script\u003e\n```\n\n## API\n\n### Plugin registration (app.use)\n| Option                 | Type                                                              | Default                                             | Description                                                                                                                                                                                                               |\n| ---------------------- | ----------------------------------------------------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| position               | String                                                            | `top-right`                                         | Position of the toast on the screen. Can be any of **top-right**, **top-center**, **top-left**, **bottom-right**, **bottom-center**, **bottom-left**.                                                                     |\n| newestOnTop            | Boolean                                                           | `true`                                              | Whether or not the newest toasts are placed on the top of the stack.                                                                                                                                                      |\n| maxToasts              | Number                                                            | `20`                                                | Maximum number of toasts on each stack at a time. Overflows wait until older toasts are dismissed to appear.                                                                                                              |\n| transition             | String or Object                                                  | `Vue-Toastification__bounce`                        | Name of the [Vue Transition](https://vuejs.org/v2/guide/transitions.html) or [object with classes](#transition-classes) to use. Only `enter-active`, `leave-active` and `move` are applied.                               |\n| draggable              | Boolean                                                           | `true`                                              | Whether or not the toast can be dismissed by being dragged to the side.                                                                                                                                                   |\n| draggablePercent       | Positive Number                                                   | `0.6`                                               | By how much of the toast width in percent (`0` to `1`) it must be dragged before being dismissed.                                                                                                                         |\n| pauseOnFocusLoss       | Boolean                                                           | `true`                                              | Whether or not the toast is paused when the window loses focus.                                                                                                                                                           |\n| pauseOnHover           | Boolean                                                           | `true`                                              | Whether or not the toast is paused when it is hovered by the mouse.                                                                                                                                                       |\n| closeOnClick           | Boolean                                                           | `true`                                              | Whether or not the toast is closed when clicked.                                                                                                                                                                          |\n| timeout                | Positive Integer or false                                         | `5000`                                              | How many milliseconds for the toast to be auto dismissed, or false to disable.                                                                                                                                            |\n| container              | HTMLElement or function that returns/resolves into an HTMLElement | `document.body`                                     | Container where the toasts are mounted.                                                                                                                                                                                   |\n| toastClassName         | String or Array of Strings                                        | `[]`                                                | Custom classes applied to the toast.                                                                                                                                                                                      |\n| bodyClassName          | String or Array of Strings                                        | `[]`                                                | Custom classes applied to the body of the toast.                                                                                                                                                                          |\n| hideProgressBar        | Boolean                                                           | `false`                                             | Whether or not the progress bar is hidden.                                                                                                                                                                                |\n| icon                   | Boolean, String, Object Vue Component or JSX                      | `true`                                              | Custom icon class to be used. When set to `true`, the icon is set automatically depending on the toast type and `false` disables the icon. Object shape is `{ iconClass: String, iconChildren: String, iconTag: String }` |\n| toastDefaults          | Object                                                            | `undefined`                                         | Toast's defaults object for configuring default toast options for each toast type.                                                                                                                                        |\n| filterBeforeCreate     | Function                                                          | `NOOP`                                              | Callback to filter toasts before their creation. Takes a `toast` and `toasts` argument and returns a `toast` or `false`                                                                                                   |\n| filterToasts           | Function                                                          | `NOOP`                                              | Callback to filter created toasts. Takes a list of `toasts` argument and return a filtered list of `toasts`                                                                                                               |\n| closeButtonClassName   | String or Array of Strings                                        | `[]`                                                | Custom classes applied to the close button of the toast.                                                                                                                                                                  |\n| closeButton            | `false`, Vue Component, JSX or HTML Tag name                      | `\"button\"`                                          | Custom component that can be used as the close button.                                                                                                                                                                    |\n| showCloseButtonOnHover | Boolean                                                           | `false`                                             | Only shows the close button when hovering the toast.                                                                                                                                                                      |\n| containerClassName     | String or Array of Strings                                        | `[]`                                                | Extra CSS class or classes added to each of the Toast containers.                                                                                                                                                         |\n| onMounted              | Function `(containerApp, containerComponent) =\u003e void`             | `undefined`                                         | Callback executed when the Toast container is mounted. Receives the app and container instances as parameters.                                                                                                            |\n| accessibility          | `{ toastRole?: string; closeButtonLabel?: string }`               | `{ toastRole: \"alert\", closeButtonLabel: \"close\" }` | Accessibility options. Define the `role` attribute of the toast body and the `aria-label` attribute of the close button.                                                                                                  |\n| rtl                    | Boolean                                                           | `false`                                             | Enables Right to Left layout.                                                                                                                                                                                             |\n| eventBus               | EventBus instance                                                 | auto-generated                                      | EventBus instance used to pass events between the interface and the plugin instance.                                                                                                                                      |\n| shareAppContext        | Boolean or App instance                                           | `false`                                             | Whether or not to share your main app's context with Vue Toastification.                                                                                                                                                  |\n\n### Toast (toast)\n| Parameter | Type                                 | Required | Description                                                                                                                                                                     |\n| --------- | ------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| content   | String, Vue Component, JSX or Object | Yes      | Toast contents. It can either be a string, a Vue Component, a JSX template or an Object. The shape of the object and its properties are described [here](#toast-content-object) |\n| options   | Object                               | No       | Toast options. Described [here](#toast-options-object)                                                                                                                          |\n\n#### Toast Content Object\n| Prop      | Type                 | Required | Description                                                                                           |\n| --------- | -------------------- | -------- | ----------------------------------------------------------------------------------------------------- |\n| component | Vue Component or JSX | Yes      | Component that will be rendered.                                                                      |\n| props     | Object               | No       | `propName: propValue` pairs of props that will be passed to the component. **These are not reactive** |\n| listeners | Object               | No       | `eventName: eventHandler` pairs of events that the component can emit.                                |\n\n#### Toast Options Object\n| Option                 | Type                                                | Default                                             | Description                                                                                                                                                                                                               |\n| ---------------------- | --------------------------------------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| id                     | Number or String                                    | `auto`                                              | ID of the toast.                                                                                                                                                                                                          |\n| type                   | String                                              | `default`                                           | Type of the toast. Can be any of  **success**, **error**, **default**, **info** and **warning**                                                                                                                           |\n| position               | String                                              | `top-right`                                         | Position of the toast on the screen. Can be any of **top-right**, **top-center**, **top-left**, **bottom-right**, **bottom-center**, **bottom-left**.                                                                     |\n| draggable              | Boolean                                             | `true`                                              | Whether or not the toast can be dismissed by being dragged to the side.                                                                                                                                                   |\n| draggablePercent       | Positive Number                                     | `0.6`                                               | By how much of the toast width in percent (`0` to `1`) it must be dragged before being dismissed.                                                                                                                         |\n| pauseOnFocusLoss       | Boolean                                             | `true`                                              | Whether or not the toast is paused when the window loses focus.                                                                                                                                                           |\n| pauseOnHover           | Boolean                                             | `true`                                              | Whether or not the toast is paused when it is hovered by the mouse.                                                                                                                                                       |\n| closeOnClick           | Boolean                                             | `true`                                              | Whether or not the toast is closed when clicked.                                                                                                                                                                          |\n| onClick                | Function                                            | `NOOP`                                              | Callback executed when the toast is clicked. A `closeToast` callback is passed as an argument to `onClick` when it is called.                                                                                             |\n| onClose                | Function                                            | `NOOP`                                              | Callback executed when the toast is closed.                                                                                                                                                                               |\n| timeout                | Positive Integer or false                           | `5000`                                              | How many milliseconds for the toast to be auto dismissed, or false to disable.                                                                                                                                            |\n| toastClassName         | String or Array of Strings                          | `[]`                                                | Custom classes applied to the toast.                                                                                                                                                                                      |\n| bodyClassName          | String or Array of Strings                          | `[]`                                                | Custom classes applied to the body of the toast.                                                                                                                                                                          |\n| hideProgressBar        | Boolean                                             | `false`                                             | Whether or not the progress bar is hidden.                                                                                                                                                                                |\n| icon                   | Boolean, String, Object Vue Component or JSX        | `true`                                              | Custom icon class to be used. When set to `true`, the icon is set automatically depending on the toast type and `false` disables the icon. Object shape is `{ iconClass: String, iconChildren: String, iconTag: String }` |\n| closeButtonClassName   | String or Array of Strings                          | `[]`                                                | Custom classes applied to the close button of the toast.                                                                                                                                                                  |\n| closeButton            | `false`, Vue Component, JSX or HTML Tag name        | `\"button\"`                                          | Custom component that can be used as the close button.                                                                                                                                                                    |\n| showCloseButtonOnHover | Boolean                                             | `false`                                             | Only shows the close button when hovering the toast.                                                                                                                                                                      |\n| accessibility          | `{ toastRole?: string; closeButtonLabel?: string }` | `{ toastRole: \"alert\", closeButtonLabel: \"close\" }` | Accessibility options. Define the `role` attribute of the toast body and the `aria-label` attribute of the close button.                                                                                                  |\n| rtl                    | Boolean                                             | `false`                                             | Enables Right to Left layout.                                                                                                                                                                                             |\n\n⚠️️ _Toast options supersede Plugin Registration props_  ⚠️\n\n\n# Updating from v1.x\nAside from dropping Vue 2 support in favor of Vue 3, not much has changed between v1.x and v2.x.\n\n## Creating toasts\n`this.$toast` is not available anymore. Use `useToast` to get a toast interface. The returning object is identical and has the same methods as `this.$toast`.\n\n## Deprecated options\nDue to some changes on Vue's transition system, `transitionDuration` has been deprecated. To change the duration of a transition, change or override the transition classes.\n\n# Acknowledgements\nThis project was heavily inspired by the beautiful [React Toastify](https://github.com/fkhadra/react-toastify) project and [other](https://github.com/shakee93/vue-toasted) [great](https://github.com/ankurk91/vue-toast-notification) Vue libraries.\n\n# License\nCopyright (C) 2020 [Maronato](https://github.com/Maronato). Licensed under MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaronato%2Fvue-toastification","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaronato%2Fvue-toastification","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaronato%2Fvue-toastification/lists"}