{"id":18331107,"url":"https://github.com/bankole2000/vt-sonner","last_synced_at":"2026-01-27T20:31:22.058Z","repository":{"id":234883757,"uuid":"789698362","full_name":"Bankole2000/vt-sonner","owner":"Bankole2000","description":"Vuetify-sonner with added features","archived":false,"fork":false,"pushed_at":"2024-10-18T21:06:48.000Z","size":230,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-09T18:12:27.743Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","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/Bankole2000.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"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},"funding":{"github":"wobsoriano"}},"created_at":"2024-04-21T09:59:23.000Z","updated_at":"2024-10-18T21:06:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"621e1997-8add-410d-af2a-a1811b519041","html_url":"https://github.com/Bankole2000/vt-sonner","commit_stats":null,"previous_names":["bankole2000/vt-sonner"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bankole2000%2Fvt-sonner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bankole2000%2Fvt-sonner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bankole2000%2Fvt-sonner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bankole2000%2Fvt-sonner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bankole2000","download_url":"https://codeload.github.com/Bankole2000/vt-sonner/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248085326,"owners_count":21045139,"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":[],"created_at":"2024-11-05T19:28:07.864Z","updated_at":"2026-01-27T20:31:22.027Z","avatar_url":"https://github.com/Bankole2000.png","language":"Vue","funding_links":["https://github.com/sponsors/wobsoriano"],"categories":[],"sub_categories":[],"readme":"https://github.com/wobsoriano/vuetify-sonner/assets/13049130/3dc381ec-95b2-4bd1-9df6-624210e9d9f4\n\n# vuetify-sonner\n\nStackable toast component for Vuetify.\n\n\u003e [!IMPORTANT]\n\u003e Snackbars should appear one at a time. This component breaks the Material [spec](https://m2.material.io/components/snackbars#behavior).\n\n## Installation\n\n```bash\nnpm install vuetify-sonner\n```\n\n## Usage\n\nAdd `\u003cVSonner /\u003e` to your app, it will be the place where all your toasts will be rendered. After that you can use `toast()` from anywhere in your app.\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { VSonner, toast } from 'vuetify-sonner'\n// Required for snackbar background and text color\nimport 'vuetify-sonner/style.css'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cVApp\u003e\n    \u003cVSonner /\u003e\n    \u003cVBtn @click=\"toast('My first toast')\"\u003e\n      Give me a toast\n    \u003c/VBtn\u003e\n  \u003c/VApp\u003e\n\u003c/template\u003e\n```\n### Default\n\nMost basic toast. You can customize it by passing an options object as the second argument.\n\n```js\ntoast('My first toast')\n```\n\nWith description:\n\n```js\ntoast('Event has been created', {\n  description: 'Monday, January 3rd at 6:00pm',\n})\n```\n\n### Action\n\nRenders a button.\n\n```js\ntoast('Event has been created', {\n  action: {\n    label: 'Undo',\n    onClick: () =\u003e console.log('Undo'),\n    buttonProps: {\n      // v-btn props\n    }\n  },\n})\n```\n\n## Customization\n\nBehind the scenes, the toast component uses Vuetify [Cards](https://vuetifyjs.com/en/components/cards/), as the snackbar component has its own overlay logic.\n\n### Position\n\nYou can change the position through the `position` prop on the `\u003cVSonner /\u003e` component. Default is `bottom-center`.\n\n```vue\n\u003cVSonner position=\"top-center\" /\u003e\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```vue\n\u003cVSonner expand :visible-toasts=\"9\" /\u003e\n```\n\n### Toast Options\n\n```js\ntoast('Event has been created', {\n  description: 'Some more context of the notification' // subtitle of the snackbar\n  cardProps: {\n    color: 'success',\n    class: 'my-toast',\n    // v-card props\n  },\n  cardTextProps: {\n    // v-card-text props\n  },\n  cardActionsProps: {\n    // v-card-actions props\n  },\n  prependIcon: 'mdi-check-circle',\n  prependIconProps: {\n    // v-icon props\n  },\n  progressBar: boolean, // show or hide countdown progress bar\n  progressBarProps: {\n    // v-progress-linear props\n  },\n  reverseProgressBar: boolean // changes progress bar direction\n  loading: boolean, // makes progressbar indeterminate\n  avatar: 'https://url.to/my/image.jpg' // avatar image url,\n  multipleAvatars: [\n    'https://url.to/image/1.jpg',\n    'https://url.to/image/2.jpg',\n    'https://url.to/image/3.jpg'\n    // will display first 5 images\n  ],\n  avatarProps: {\n    // v-avatar props\n  }\n})\n```\n\n### Programmatically remove toast\n\nTo remove a toast programmatically use `toast.dismiss(id)`.\n\n```js\nconst toastId = toast('Event has been created')\n\ntoast.dismiss(toastId)\n```\n\nYou can also use the dismiss method without the id to dismiss all toasts.\n\n```js\n// Removes all toasts\n\ntoast.dismiss()\n```\n\n### Duration\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```vue\n\u003cVSonner :duration=\"10000\" /\u003e\n```\n\n```js\ntoast('Event has been created', {\n  duration: 10000,\n})\n\n// Persisent toast\ntoast('Event has been created', {\n  duration: Number.POSITIVE_INFINITY,\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```js\ntoast('Event has been created', {\n  onDismiss: t =\u003e console.log(`Toast with id ${t.id} has been dismissed`),\n  onAutoClose: t =\u003e console.log(`Toast with id ${t.id} has been closed automatically`),\n})\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```vue\n\u003cVSonner :hotkey=\"['KeyC']\" /\u003e\n```\n\n### Use Underlying `Vue-Sonner`\n\n`vuetify-sonner`, as a wrapper over the `vue-sonner` library, grants access to all the underlying methods and properties of `vue-sonner` by using the `toast.toastOriginal` property, e.g.\n\n```js\n// Using Vue-Sonners Promise toast\nimport { toast } from 'vuetify-sonner'\n\nconst promise = () =\u003e new Promise((resolve) =\u003e setTimeout(resolve, 2000));\n\ntoast.toastOriginal\n  .promise(promise, {\n    loading: 'Loading...', \n    success: (data) =\u003e {\n      return `${data} toast has been added`;\n    },\n    error: (data: any) =\u003e 'Error',\n  });\n```\n\nSee [here for more on using vue-sonner](https://vue-sonner.vercel.app/)\n\n## Nuxt Usage\n\n```ts\nexport default defineNuxtConfig({\n  build: {\n    transpile: ['vue-sonner']\n  }\n})\n```\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { VSonner, toast } from 'vuetify-sonner'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cVApp\u003e\n    \u003cClientOnly\u003e\n      \u003cVSonner /\u003e\n    \u003c/ClientOnly\u003e\n    \u003cVBtn @click=\"toast('My first toast')\"\u003e\n      Give me a toast\n    \u003c/VBtn\u003e\n  \u003c/VApp\u003e\n\u003c/template\u003e\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbankole2000%2Fvt-sonner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbankole2000%2Fvt-sonner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbankole2000%2Fvt-sonner/lists"}