[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8914":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":34,"discoverSource":35},8914,"vue-sonner","xiaoluoboding\u002Fvue-sonner","xiaoluoboding","🔔 An opinionated toast component for Vue & Nuxt.","https:\u002F\u002Fvue-sonner.robertshaw.me",null,"Vue",1451,73,1,49,0,2,13,6,18.61,"MIT License",false,"main",true,[26,27,28,29,30],"component-library","nuxt3","toast","vue3","vuejs","2026-06-12 02:02:00","# Sonner for Vue\n\n[![NPM][npmBadge]][npmUrl]\n[![Minzip Package][bundlePhobiaBadge]][bundlePhobiaUrl]\n[![NPM Download][npmDtBadge]][npmDtUrl]\n\n[npmBadge]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fvue-sonner.svg?maxAge=2592000\n[npmUrl]: https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvue-sonner\n[npmDtBadge]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002Fvue-sonner.svg\n[npmDtUrl]: https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvue-sonner\n[bundlePhobiaBadge]: https:\u002F\u002Fimg.shields.io\u002Fbundlephobia\u002Fminzip\u002Fvue-sonner\n[bundlePhobiaUrl]: https:\u002F\u002Fbundlephobia.com\u002Fpackage\u002Fvue-sonner@latest\n\n> An opinionated toast component for Vue. It's a Vue port of Sonner\n\n## Preview\n\nhttps:\u002F\u002Fuser-images.githubusercontent.com\u002F6118824\u002F228208185-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\u003Cdetails>\n\n\u003Csummary>TOC\u003C\u002Fsummary>\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\u003C\u002Fdetails>\n\n## Installation\n\nTo start using the library, install it in your project:\n\n```bash\npnpm install vue-sonner\nor\nyarn add 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 .\u002Ftest\n```\n\nand launch the following command\n\n```bash\ncd .\u002Ftest\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\u003C!-- App.vue -->\n\u003Ctemplate>\n  \u003CToaster \u002F>\n  \u003Cbutton @click=\"() => toast('My first toast')\">Render a toast\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" setup>\n  import 'vue-sonner\u002Fstyle.css'\n  import { Toaster, toast } from 'vue-sonner'\n\u003C\u002Fscript>\n```\n\n### For Nuxt 3\n\nUse `vue-sonner\u002Fnuxt` module\n\n```ts\n\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  ...\n  modules: ['vue-sonner\u002Fnuxt']\n  vueSonner: {\n    css: false \u002F\u002F 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\u003C!-- app.vue -->\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003CToaster position=\"top-right\" \u002F>\n    \u003Cbutton @click=\"() => $toast('My first toast')\">Render a toast\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\n  const { $toast } = useNuxtApp()\n\u003C\u002Fscript>\n```\n\n### CDN Link\n\n**EMS version**\n\n```ts\nhttps:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fvue-sonner\u002F+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\u002Ferror messages to incorporate the result\u002Ferror 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\u003Cscript lang=\"ts\" setup>\n  import { defineComponent, h, markRaw } from 'vue'\n\n  const CustomDiv = defineComponent({\n    setup() {\n      return () =>\n        h('div', {\n          innerHTML: 'A custom toast with unstyling'\n        })\n    }\n  })\n\n  toast(markRaw(CustomDiv))\n\u003C\u002Fscript>\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\u003Cscript lang=\"ts\" setup>\nimport { markRaw } from 'vue'\n\nimport HeadlessToast from '.\u002FHeadlessToast.vue'\n\ntoast.custom(markRaw(HeadlessToast), { duration: 999999 })\n\u003C\u002Fscript>\n```\n\n### Theme\n\nYou can change the theme using the `theme` prop. Default theme is light.\n\n```html\n\u003CToaster theme=\"dark\" \u002F>\n```\n\n### Position\n\nYou can change the position through the `position` prop on the `\u003CToaster \u002F>` component. Default is `top-right`.\n\n```html\n\u003C!-- Available positions -->\n\u003C!-- top-left, top-center, top-right, bottom-left, bottom-center, bottom-right -->\n\n\u003CToaster position=\"top-center\" \u002F>\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\u003CToaster expand :visibleToasts=\"9\" \u002F>\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\u003CToaster\n  :toastOptions=\"{\n    style: { background: 'red' },\n    class: 'my-toast',\n    descriptionClass: 'my-toast-description'\n  }\"\n\u002F>\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\u003CToaster\n  :toastOptions=\"{\n    unstyled: true,\n    classes: {\n      toast: 'bg-blue-400',\n      title: 'text-red-400',\n      description: 'text-red-400',\n      actionButton: 'bg-zinc-400',\n      cancelButton: 'bg-orange-400',\n      closeButton: 'bg-lime-400'\n    }\n  }\"\n\u002F>\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\u003CToaster\n  :toastOptions=\"{\n    unstyled: true,\n    classes: {\n      error: 'bg-red-400',\n      success: 'text-green-400',\n      warning: 'text-yellow-400',\n      info: 'bg-blue-400'\n    }\n  }\"\n\u002F>\n```\n\n### Changing Icon\n\nYou can change the default icons using slots:\n\n```vue\n\u003CToaster>\n  \u003Ctemplate #loading-icon>\n    \u003CLoadingIcon \u002F>\n  \u003C\u002Ftemplate>\n  \u003Ctemplate #success-icon>\n    \u003CSuccessIcon \u002F>\n  \u003C\u002Ftemplate>\n  \u003Ctemplate #error-icon>\n    \u003CErrorIcon \u002F>\n  \u003C\u002Ftemplate>\n  \u003Ctemplate #info-icon>\n    \u003CInfoIcon \u002F>\n  \u003C\u002Ftemplate>\n  \u003Ctemplate #warning-icon>\n    \u003CWarningIcon \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FToaster>\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\u003CToaster closeButton \u002F>\n```\n\n### Rich colors\n\nYou can make error and success state more colorful by adding the `richColors` prop.\n\n```html\n\u003CToaster richColors \u002F>\n```\n\n### Custom offset\n\nOffset from the edges of the screen.\n\n```html\n\u003CToaster offset=\"80px\" \u002F>\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\u003CToaster :duration=\"10000\" \u002F>\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\u002F\u002F 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 ⌥\u002Falt + T. You can override it by providing an array of event.code values for each key.\n\n```html\n\u003CToaster hotkey=\"['KeyC']\" \u002F>\n```\n\n## Contributors\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fxiaoluoboding\u002Fvue-sonner\u002Fgraphs\u002Fcontributors\">\n  \u003Cimg src=\"https:\u002F\u002Fcontrib.rocks\u002Fimage?repo=xiaoluoboding\u002Fvue-sonner\" \u002F>\n\u003C\u002Fa>\n\n## Inspiration\n\n- [sonner](https:\u002F\u002Fgithub.com\u002Femilkowalski\u002Fsonner) - An opinionated toast component for React.\n\n## License\n\nMIT [@xiaoluoboding](https:\u002F\u002Fgithub.com\u002Fxiaoluoboding)\n","Vue Sonner 是一个专为 Vue 和 Nuxt 设计的提示组件。它提供了多种类型的提示信息（如默认、成功、错误等），并支持自定义样式和动画效果，比如滑动关闭。该组件开箱即用且易于定制，同时保持了较小的包体积。适用于需要向用户展示临时通知信息的各种Web应用开发场景中，无论是简单的消息提示还是复杂的交互反馈都能轻松应对。","2026-06-11 03:20:16","top_language"]