{"id":15315746,"url":"https://github.com/wobsoriano/vuetify-sonner","last_synced_at":"2025-05-16T09:05:57.653Z","repository":{"id":179040024,"uuid":"662267126","full_name":"wobsoriano/vuetify-sonner","owner":"wobsoriano","description":"Stackable toast component for Vuetify.","archived":false,"fork":false,"pushed_at":"2025-03-14T06:48:26.000Z","size":319,"stargazers_count":137,"open_issues_count":5,"forks_count":9,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-15T03:07:19.638Z","etag":null,"topics":["snackbar","toast","vue","vuetify"],"latest_commit_sha":null,"homepage":"https://vuetify-sonner.vercel.app","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/wobsoriano.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2023-07-04T18:24:59.000Z","updated_at":"2025-05-10T10:36:22.000Z","dependencies_parsed_at":"2023-12-30T00:32:40.205Z","dependency_job_id":"b5d8d309-110e-4cda-9f28-e5ab62a05671","html_url":"https://github.com/wobsoriano/vuetify-sonner","commit_stats":{"total_commits":119,"total_committers":5,"mean_commits":23.8,"dds":0.07563025210084029,"last_synced_commit":"4fced64e6909acbc748ec73b621cb7f3470854c3"},"previous_names":["wobsoriano/vuetify-sonner"],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fvuetify-sonner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fvuetify-sonner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fvuetify-sonner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fvuetify-sonner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wobsoriano","download_url":"https://codeload.github.com/wobsoriano/vuetify-sonner/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254501557,"owners_count":22081528,"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":["snackbar","toast","vue","vuetify"],"created_at":"2024-10-01T08:51:55.420Z","updated_at":"2025-05-16T09:05:52.641Z","avatar_url":"https://github.com/wobsoriano.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%2Fwobsoriano%2Fvuetify-sonner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwobsoriano%2Fvuetify-sonner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwobsoriano%2Fvuetify-sonner/lists"}