{"_id":"@arrai-innovations/vue-sonner","_rev":"2-a1cc71ac56e946a89828145e4ffb5afe","name":"@arrai-innovations/vue-sonner","dist-tags":{"latest":"2.0.11"},"versions":{"2.0.10":{"name":"@arrai-innovations/vue-sonner","version":"2.0.10","author":{"name":"Arrai Innovations","email":"developers@arrai.com"},"license":"MIT","_id":"@arrai-innovations/vue-sonner@2.0.10","maintainers":[{"name":"arrai-developers","email":"developers@arrai.com"}],"contributors":[{"name":"xiaoluoboding","email":"xiaoluoboding@gmail.com"}],"homepage":"https://github.com/arrai-innovations/vue-sonner","bugs":{"url":"https://github.com/arrai-innovations/vue-sonner/issues"},"dist":{"shasum":"c7835682d398f63abbb09fbb5d3e2daa77c41c07","tarball":"https://registry.npmjs.org/@arrai-innovations/vue-sonner/-/vue-sonner-2.0.10.tgz","fileCount":31,"integrity":"sha512-teNiuRuD6v6KKyjLXuvmPPd0guZNht2F7eClQlDUHk1IJcL0bqCWfjKBotlNfuOqieZ5WiTACPiJXKK5aXK3UA==","signatures":[{"sig":"MEQCIAq5Q6M0JANH3AYt9NGq5dc4u7DPw4AX0R9S7M8AzbdZAiB5QIIseHDsjTkMVW6DTi6/QmAeH1TzV8mJdVG5EG9Pog==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":219729},"main":"./lib/index.js","type":"module","_from":"file:arrai-innovations-vue-sonner-2.0.10.tgz","types":"./lib/index.d.ts","module":"./lib/index.js","exports":{".":{"types":"./lib/index.d.ts","import":"./lib/index.js"},"./nuxt":{"import":{"types":"./lib/nuxt/types.d.mts","default":"./lib/nuxt/module.mjs"}},"./src/*":{"import":"./src/*","default":"./src/*"},"./style.css":"./lib/index.css"},"scripts":{"dev":"vite","test":"cd ./test && pnpm test:e2e --ui","preview":"vite preview","release":"pnpm run build:lib && pnpm run build:module && pnpm run build:umd","build:dev":"tsdown --watch","build:lib":"tsdown","build:umd":"tsdown --config tsdown.config.umd.ts","changelog":"conventional-changelog -p angular -i CHANGELOG.md -s -r 0","dev:build":"nuxi build playground","build:docs":"vite build --mode docs","dev:prepare":"nuxt-module-build build --stub && nuxi prepare playground","build:module":"nuxt-module-build build --outDir lib/nuxt","dev:playground":"nuxi dev playground"},"_npmUser":{"name":"arrai-developers","email":"developers@arrai.com"},"_resolved":"/tmp/27ba26b7f9bacf98b4a312fc83d2b716/arrai-innovations-vue-sonner-2.0.10.tgz","_integrity":"sha512-teNiuRuD6v6KKyjLXuvmPPd0guZNht2F7eClQlDUHk1IJcL0bqCWfjKBotlNfuOqieZ5WiTACPiJXKK5aXK3UA==","repository":{"url":"git+https://github.com/arrai-innovations/vue-sonner.git","type":"git"},"_npmVersion":"11.17.0","description":"[![NPM][npmBadge]][npmUrl] [![Minzip Package][bundlePhobiaBadge]][bundlePhobiaUrl] [![NPM Download][npmDtBadge]][npmDtUrl]","directories":{},"sideEffects":["**/*.css","**/src/*"],"_nodeVersion":"22.23.1","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.18","vite":"^6.3.5","tsdown":"^0.11.13","unocss":"^66.4.2","vue-tsc":"^2.2.12","typescript":"^5.9.2","vue-sonner":"link:","@types/node":"^20.19.11","@vueuse/core":"^13.6.0","@vueuse/head":"^2.0.0","highlight.js":"^11.11.1","unplugin-vue":"^6.2.0","@iconify/json":"^2.2.375","@unocss/reset":"^66.4.2","@vue/tsconfig":"^0.7.0","@nuxt/devtools":"^2.6.2","unplugin-icons":"^22.2.0","@nuxt/test-utils":"^3.19.2","@vitejs/plugin-vue":"^5.2.4","@nuxt/module-builder":"^1.0.2","unplugin-vue-components":"^28.8.0","@senojs/rollup-plugin-style-inject":"^0.2.3"},"peerDependencies":{"nuxt":"^4.0.3","@nuxt/kit":"^4.0.3","@nuxt/schema":"^4.0.3"},"peerDependenciesMeta":{"nuxt":{"optional":true},"@nuxt/kit":{"optional":true},"@nuxt/schema":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/vue-sonner_2.0.10_1783029968079_0.01344614191116289","host":"s3://npm-registry-packages-npm-production"}},"2.0.11":{"name":"@arrai-innovations/vue-sonner","type":"module","version":"2.0.11","author":{"name":"Arrai Innovations","email":"developers@arrai.com"},"contributors":[{"name":"xiaoluoboding","email":"xiaoluoboding@gmail.com"}],"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"license":"MIT","homepage":"https://github.com/arrai-innovations/vue-sonner","repository":{"type":"git","url":"git+https://github.com/arrai-innovations/vue-sonner.git"},"sideEffects":["**/*.css","**/src/*"],"exports":{".":{"types":"./lib/index.d.ts","import":"./lib/index.js"},"./style.css":"./lib/index.css","./nuxt":{"import":{"types":"./lib/nuxt/types.d.mts","default":"./lib/nuxt/module.mjs"}},"./src/*":{"import":"./src/*","default":"./src/*"}},"main":"./lib/index.js","module":"./lib/index.js","types":"./lib/index.d.ts","devDependencies":{"@iconify/json":"^2.2.375","@nuxt/devtools":"^2.6.2","@nuxt/module-builder":"^1.0.2","@nuxt/test-utils":"^3.19.2","@senojs/rollup-plugin-style-inject":"^0.2.3","@types/node":"^20.19.11","@unocss/reset":"^66.4.2","@vitejs/plugin-vue":"^5.2.4","@vue/tsconfig":"^0.7.0","@vueuse/core":"^13.6.0","@vueuse/head":"^2.0.0","highlight.js":"^11.11.1","tsdown":"^0.11.13","typescript":"^5.9.2","unocss":"^66.4.2","unplugin-icons":"^22.2.0","unplugin-vue":"^6.2.0","unplugin-vue-components":"^28.8.0","vite":"^6.3.5","vue":"^3.5.18","vue-sonner":"link:","vue-tsc":"^2.2.12"},"peerDependencies":{"@nuxt/kit":"^4.0.3","@nuxt/schema":"^4.0.3","nuxt":"^4.0.3"},"peerDependenciesMeta":{"@nuxt/kit":{"optional":true},"@nuxt/schema":{"optional":true},"nuxt":{"optional":true}},"scripts":{"dev":"vite","dev:playground":"nuxi dev playground","dev:build":"nuxi build playground","dev:prepare":"nuxt-module-build build --stub && nuxi prepare playground","build:dev":"tsdown --watch","build:docs":"vite build --mode docs","build:lib":"tsdown","build:module":"nuxt-module-build build --outDir lib/nuxt","build:umd":"tsdown --config tsdown.config.umd.ts","release":"pnpm run build:lib && pnpm run build:module && pnpm run build:umd","preview":"vite preview","test":"cd ./test && pnpm test:e2e --ui","changelog":"conventional-changelog -p angular -i CHANGELOG.md -s -r 0"},"_id":"@arrai-innovations/vue-sonner@2.0.11","description":"[![NPM][npmBadge]][npmUrl] [![Minzip Package][bundlePhobiaBadge]][bundlePhobiaUrl] [![NPM Download][npmDtBadge]][npmDtUrl]","bugs":{"url":"https://github.com/arrai-innovations/vue-sonner/issues"},"_integrity":"sha512-+JfXWEGDWxWoR12NPU/9g+Z4xY2xB2MYoxMMWV4sDZYgFKImV0GxujZfS1BcMqShlE+hiXGu132ektQMBktiCA==","_resolved":"/tmp/1d1f877578967a1d22e469a140fb0559/arrai-innovations-vue-sonner-2.0.11.tgz","_from":"file:arrai-innovations-vue-sonner-2.0.11.tgz","_nodeVersion":"24.18.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-+JfXWEGDWxWoR12NPU/9g+Z4xY2xB2MYoxMMWV4sDZYgFKImV0GxujZfS1BcMqShlE+hiXGu132ektQMBktiCA==","shasum":"d5bdf0662de748f8add79051eeaf4eec5d163a77","tarball":"https://registry.npmjs.org/@arrai-innovations/vue-sonner/-/vue-sonner-2.0.11.tgz","fileCount":31,"unpackedSize":211791,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCgRVxUYSJYtDiJRLWFKiqTn760YRqBjRnTeysihu+PMQIhAKUar8AXNffFfRSTTkvOZO9b0S0/BiySfWnqmk4CA9hH"}]},"_npmUser":{"name":"arrai-developers","email":"developers@arrai.com"},"directories":{},"maintainers":[{"name":"arrai-developers","email":"developers@arrai.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-sonner_2.0.11_1787436290389_0.0870818934085471"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-02T22:06:07.887Z","modified":"2026-08-22T22:04:50.722Z","2.0.10":"2026-07-02T22:06:08.236Z","2.0.11":"2026-08-22T22:04:50.541Z"},"bugs":{"url":"https://github.com/arrai-innovations/vue-sonner/issues"},"author":{"name":"Arrai Innovations","email":"developers@arrai.com"},"license":"MIT","homepage":"https://github.com/arrai-innovations/vue-sonner","repository":{"type":"git","url":"git+https://github.com/arrai-innovations/vue-sonner.git"},"description":"[![NPM][npmBadge]][npmUrl] [![Minzip Package][bundlePhobiaBadge]][bundlePhobiaUrl] [![NPM Download][npmDtBadge]][npmDtUrl]","contributors":[{"name":"xiaoluoboding","email":"xiaoluoboding@gmail.com"}],"maintainers":[{"name":"arrai-developers","email":"developers@arrai.com"}],"readme":"# Sonner for Vue\n\n[![NPM][npmBadge]][npmUrl]\n[![Minzip Package][bundlePhobiaBadge]][bundlePhobiaUrl]\n[![NPM Download][npmDtBadge]][npmDtUrl]\n\n[npmBadge]: https://img.shields.io/npm/v/@arrai-innovations/vue-sonner.svg?maxAge=2592000\n[npmUrl]: https://www.npmjs.com/package/@arrai-innovations/vue-sonner\n[npmDtBadge]: https://img.shields.io/npm/dt/@arrai-innovations/vue-sonner.svg\n[npmDtUrl]: https://www.npmjs.com/package/@arrai-innovations/vue-sonner\n[bundlePhobiaBadge]: https://img.shields.io/bundlephobia/minzip/@arrai-innovations/vue-sonner\n[bundlePhobiaUrl]: https://bundlephobia.com/package/@arrai-innovations/vue-sonner@latest\n\n## `@arrai-innovations/vue-sonner`\n\nThis is a fork of [`xiaoluoboding/vue-sonner`](https://github.com/xiaoluoboding/vue-sonner), maintained\nby [Arrai Innovations](https://github.com/arrai-innovations) for use in [VUEDA](https://github.com/arrai-innovations/vueda).\n\nUpstream has been effectively unmaintained since its `v2.0.9` release: PR/issue throughput has slowed\nsubstantially, and several bugs we rely on fixes for have open reports with no maintainer response. We\nforked rather than work around these issues indefinitely in consumer CSS/JS, so the fixes live at the\nsource instead.\n\nChanges from upstream `v2.0.9`:\n\n- **Hover/collapse flicker fix**: dismissing a toast (or the toast count otherwise dropping to one or\n zero) while the pointer rests over the stack could make the browser fire a spurious native\n `mouseleave` on the departing/resized node, immediately followed by a `mouseenter` once layout\n settled -- even though the pointer never moved. `Toaster.vue` treated that `mouseleave` as a real\n departure and collapsed the stack, then re-expanded it on the next event, producing a visible\n flicker. Collapsing is now debounced: a short timer is scheduled instead of applied immediately, and\n any subsequent `mouseenter`/`mousemove` on that position cancels it before it fires. A real departure\n (the timer elapses with no re-entry) still collapses the stack as before.\n\n- **Themeable description and cancel colors**: description text and cancel button backgrounds now use\n `--description-text` and `--cancel-bg` instead of hard-coded light/dark literals. Default light and\n dark values are unchanged, and inverted toasts now get the matching inverted values.\n\nWe intend to track upstream and periodically rebase/merge in new fixes; this fork is not a permanent\ndivergence. If upstream resumes active maintenance and picks up equivalent fixes, we'd rather go back\nto depending on it directly.\n\n> An opinionated toast component for Vue. It's a Vue port of Sonner\n\n## Preview\n\nhttps://user-images.githubusercontent.com/6118824/228208185-be5aefd4-7fa8-4f95-a41c-88a60c0e2800.mp4\n\n## Introduction\n\n`Vue Sonner` is an opinionated toast component for Vue. It's customizable, but styled by default. Comes with a swipe to dismiss animation.\n\n## Table of Contents\n\n\n\nTOC\n\n- [Sonner for Vue](#sonner-for-vue)\n - [Preview](#preview)\n - [Introduction](#introduction)\n - [Table of Contents](#table-of-contents)\n - [Installation](#installation)\n - [Test](#test)\n - [Launching the test](#launching-the-test)\n - [Build and watch for change in order to fix the test](#build-and-watch-for-change-in-order-to-fix-the-test)\n - [Usage](#usage)\n - [For Vue 3](#for-vue-3)\n - [For Nuxt 3](#for-nuxt-3)\n - [CDN Link](#cdn-link)\n - [Types](#types)\n - [Default](#default)\n - [Success](#success)\n - [Error](#error)\n - [Action](#action)\n - [Promise](#promise)\n - [Custom Component](#custom-component)\n - [Customization](#customization)\n - [Headless](#headless)\n - [Theme](#theme)\n - [Position](#position)\n - [Expanded](#expanded)\n - [Styling for all toasts](#styling-for-all-toasts)\n - [Styling for individual toast](#styling-for-individual-toast)\n - [Tailwind CSS](#tailwind-css)\n - [Changing Icon](#changing-icon)\n - [Close button](#close-button)\n - [Rich colors](#rich-colors)\n - [Custom offset](#custom-offset)\n - [On Close Callback](#on-close-callback)\n - [Persisting toasts](#persisting-toasts)\n - [Dismissing toasts programmatically](#dismissing-toasts-programmatically)\n - [Keyboard focus](#keyboard-focus)\n - [Contributors](#contributors)\n - [Inspiration](#inspiration)\n - [License](#license)\n\n\n\n## Installation\n\nTo start using the library, install it in your project:\n\n```bash\npnpm install @arrai-innovations/vue-sonner\nor\nyarn add @arrai-innovations/vue-sonner\n```\n\n## Test\n\nTo run the test you need two separate CLI window :\n\n### Launching the test\n\nTo launch the test, you need to go in the test directory\n\n```bash\ncd ./test\n```\n\nand launch the following command\n\n```bash\ncd ./test\npnpm test:e2e --ui\n```\n\n### Build and watch for change in order to fix the test\n\nThis command will build the vue-sonner library in lib mode, and add a watch so every time you modify the code of the library, you will have a new bundle and can run the test again.\n\n```bash\npnpm build:dev\n```\n\n## Usage\n\n### For Vue 3\n\n```html\n\n\n \n \n\n\n\n```\n\n### For Nuxt 3\n\nUse `@arrai-innovations/vue-sonner/nuxt` module\n\n```ts\n// nuxt.config.ts\nexport default defineNuxtConfig({\n ...\n modules: ['@arrai-innovations/vue-sonner/nuxt']\n vueSonner: {\n css: false // true by default to include css file\n }\n})\n```\n\nUse `Toaster` component and `$toast` function anywhere in the Vue SFC\n\n```html\n\n\n
\n \n \n
\n\n\n\n```\n\n### CDN Link\n\n**EMS version**\n\n```ts\nhttps://cdn.jsdelivr.net/npm/@arrai-innovations/vue-sonner/+esm\n```\n\n## Types\n\n### Default\n\nMost basic toast. You can customize it (and any other type) by passing an options object as the second argument.\n\n```ts\ntoast('Event has been created')\n```\n\nWith custom description:\n\n```ts\ntoast('Event has been created', {\n description: 'Monday, January 3rd at 6:00pm'\n})\n```\n\n### Success\n\nRenders a checkmark icon in front of the message.\n\n```ts\ntoast.success('Event has been created')\n```\n\n### Error\n\nRenders an error icon in front of the message.\n\n```ts\ntoast.error('Event has not been created')\n```\n\n### Action\n\nRenders a button.\n\n```ts\ntoast('Event has been created', {\n action: {\n label: 'Undo',\n onClick: () => console.log('Undo')\n }\n})\n```\n\n### Promise\n\nStarts in a loading state and will update automatically after the promise resolves or fails.\n\nYou can pass a function to the success/error messages to incorporate the result/error of the promise.\n\n```ts\ntoast.promise(() => new Promise((resolve) => setTimeout(resolve, 2000)), {\n loading: 'Loading',\n success: (data: any) => 'Success',\n error: (data: any) => 'Error'\n})\n```\n\n### Custom Component\n\nYou can pass a Vue Component as the first argument instead of a string to render custom Component while maintaining default styling. You can use the headless version below for a custom, unstyled toast.\n\n```html\n\n```\n\n## Customization\n\n### Headless\n\nYou can use `toast.custom` to render an unstyled toast with custom jsx while maintaining the functionality.\n\n```vue\n\n```\n\n### Theme\n\nYou can change the theme using the `theme` prop. Default theme is light.\n\n```html\n\n```\n\n### Position\n\nYou can change the position through the `position` prop on the `` component. Default is `top-right`.\n\n```html\n\n\n\n\n```\n\n### Expanded\n\nToasts can also be expanded by default through the `expand` prop. You can also change the amount of visible toasts which is 3 by default.\n\n```html\n\n```\n\n### Styling for all toasts\n\nYou can style your toasts globally with the `toastOptions` prop in the `Toaster` component.\n\n```html\n\n```\n\n### Styling for individual toast\n\n```ts\ntoast('Event has been created', {\n style: {\n background: 'red'\n },\n class: 'my-toast',\n descriptionClass: 'my-toast-description'\n})\n```\n\n### Tailwind CSS\n\nThe preferred way to style the toasts with tailwind is by using the `unstyled` prop. That will give you an unstyled toast which you can then style with tailwind.\n\n```vue\n\n```\n\nYou can do the same when calling `toast()`.\n\n```ts\ntoast('Hello World', {\n unstyled: true,\n classes: {\n toast: 'bg-blue-400',\n title: 'text-red-400 text-2xl',\n description: 'text-red-400',\n actionButton: 'bg-zinc-400',\n cancelButton: 'bg-orange-400',\n closeButton: 'bg-lime-400'\n }\n})\n```\n\nStyling per toast type is also possible.\n\n```vue\n\n```\n\n### Changing Icon\n\nYou can change the default icons using slots:\n\n```vue\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n```\n\n### Close button\n\nAdd a close button to all toasts that shows on hover by adding the `closeButton` prop.\n\n```html\n\n```\n\n### Rich colors\n\nYou can make error and success state more colorful by adding the `richColors` prop.\n\n```html\n\n```\n\n### Custom offset\n\nOffset from the edges of the screen.\n\n```html\n\n```\n\n### On Close Callback\n\nYou can pass `onDismiss` and `onAutoClose` callbacks. `onDismiss` gets fired when either the close button gets clicked or the toast is swiped. `onAutoClose` fires when the toast disappears automatically after it's timeout (`duration` prop).\n\n```ts\ntoast('Event has been created', {\n onDismiss: (t) => console.log(`Toast with id ${t.id} has been dismissed`),\n onAutoClose: (t) =>\n console.log(`Toast with id ${t.id} has been closed automatically`)\n})\n```\n\n### Persisting toasts\n\nYou can change the duration of each toast by using the duration property, or change the duration of all toasts like this:\n\n```html\n\n```\n\n```ts\ntoast('Event has been created', {\n duration: 10000\n})\n\nIf you want a toast to stay on screen forever, you can set the duration to `Infinity`.\n\n// Persisent toast\ntoast('Event has been created', {\n duration: Infinity\n})\n```\n\n### Dismissing toasts programmatically\n\nTo remove a toast programmatically use `toast.dismiss(id)`.\n\n```ts\nconst toastId = toast('Event has been created')\n\ntoast.dismiss(toastId)\n```\n\nYou can also dismiss all toasts at once by calling `toast.dismiss()` without an id.\n\n```ts\ntoast.dismiss()\n```\n\n### Keyboard focus\n\nYou can focus on the toast area by pressing ⌥/alt + T. You can override it by providing an array of event.code values for each key.\n\n```html\n\n```\n\n## Contributors\n\n\n \n\n\n## Inspiration\n\n- [sonner](https://github.com/emilkowalski/sonner) - An opinionated toast component for React.\n\n## License\n\nMIT [@xiaoluoboding](https://github.com/xiaoluoboding)\n","readmeFilename":"README.md"}