{"id":13880668,"url":"https://github.com/smastrom/notivue","last_synced_at":"2025-05-15T09:04:42.585Z","repository":{"id":156523288,"uuid":"622690706","full_name":"smastrom/notivue","owner":"smastrom","description":"🔔 Powerful toast notification system for Vue and Nuxt.","archived":false,"fork":false,"pushed_at":"2024-09-02T12:04:09.000Z","size":1257,"stargazers_count":807,"open_issues_count":0,"forks_count":9,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-11T16:32:17.129Z","etag":null,"topics":["alert","alerts","notification","notifications","nuxt","nuxt3","toast","toast-message","toast-notifications","vue","vue-notification","vue-notifications","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://notivue.smastrom.io","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/smastrom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"polar":"smastrom","buy_me_a_coffee":"smastrom"}},"created_at":"2023-04-02T20:54:03.000Z","updated_at":"2025-04-11T12:39:10.000Z","dependencies_parsed_at":"2023-09-28T22:32:42.587Z","dependency_job_id":"55e646d6-8ee2-4f46-b4ff-ea7759ea8e38","html_url":"https://github.com/smastrom/notivue","commit_stats":{"total_commits":217,"total_committers":6,"mean_commits":"36.166666666666664","dds":"0.43317972350230416","last_synced_commit":"5d5b8e85b40a3271e151b27a206872fa3c19f1c0"},"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smastrom%2Fnotivue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smastrom%2Fnotivue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smastrom%2Fnotivue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smastrom%2Fnotivue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smastrom","download_url":"https://codeload.github.com/smastrom/notivue/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248441351,"owners_count":21103977,"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":["alert","alerts","notification","notifications","nuxt","nuxt3","toast","toast-message","toast-notifications","vue","vue-notification","vue-notifications","vue3","vuejs"],"created_at":"2024-08-06T08:03:22.105Z","updated_at":"2025-04-11T16:33:49.306Z","avatar_url":"https://github.com/smastrom.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"https://cdn.smastrom.io/notivue-readme.svg\" width=\"800\" height=\"auto\" alt=\"notivue\" /\u003e\n\n\u003cbr /\u003e\n\n# Notivue\n\n### Powerful toast notification system for Vue and Nuxt\n\n[Live Demo](https://notivue.smastrom.io) - [Documentation](https://docs.notivue.smastrom.io)\n\n---\n\n**Examples:** [Custom Components](https://stackblitz.com/edit/vitejs-vite-9jkh73?file=src%2Fcomponents%2FPage.vue) -\n[Nuxt](https://stackblitz.com/edit/nuxt-starter-fnhcmx?file=pages%2Findex.vue) -\n[Astro](https://stackblitz.com/edit/withastro-astro-qyesvk?file=src%2Fcomponents%2FVueComponent.vue)\n\n\u003cbr /\u003e\n\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n## Features\n\n**🧬 Fully modular with zero dependencies**  \n_Granularly include only the features you need_\n\n**✅ Beautiful, ready-made notifications included**  \n_Themes, icons, progress bar, and native RTL support_\n\n**🧩 Headless API**  \n_Use your own components while Notivue handles the rest_\n\n**💊 Drop-in components to enhance notifications**  \n_NotivueSwipe, NotivueKeyboard, all optional and customizable_\n\n**🌀 Dynamic Notifications**  \n_Update pending notifications with a breeze_\n\n**🎢 Slick transitions and animations**  \n_Customize animations with CSS classes_\n\n**♿️ Fully accessible**  \n_Built-in announcements, reduced-motion and keyboard support_\n\n**💫 Nuxt and Astro modules**  \n_Built-in Nuxt and Astro ad-hoc modules_\n\n\u003cbr /\u003e\n\n## Installation\n\n```shell\npnpm add notivue\n\n# npm i notivue\n# yarn add notivue\n# bun i notivue\n```\n\n\u003cbr /\u003e\n\n## Vite\n\n\u003e :bulb: See [↓ below](#nuxt) for **Nuxt**\n\n**main.js/ts**\n\n```ts\nimport { createApp } from 'vue'\nimport { createNotivue } from 'notivue'\n\nimport App from './App.vue'\n\nimport 'notivue/notification.css' // Only needed if using built-in \u003cNotification /\u003e\nimport 'notivue/animations.css' // Only needed if using default animations\n\nconst notivue = createNotivue(/* Options */)\nconst app = createApp(App)\n\napp.use(notivue)\napp.mount('#app')\n```\n\n**App.vue**\n\n```vue\n\u003cscript setup\u003e\nimport { Notivue, Notification, push } from 'notivue'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cbutton @click=\"push.success('Hi! I am your first notification!')\"\u003ePush\u003c/button\u003e\n\n  \u003cNotivue v-slot=\"item\"\u003e\n    \u003cNotification :item=\"item\" /\u003e\n  \u003c/Notivue\u003e\n\n  \u003c!-- RouterView, etc. --\u003e\n\u003c/template\u003e\n```\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eHeadless, with custom components\u003c/strong\u003e\u003c/summary\u003e\n\n```vue\n\u003cscript setup\u003e\nimport { Notivue, push } from 'notivue'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cbutton @click=\"push.success('Hi! I am your first notification!')\"\u003ePush\u003c/button\u003e\n\n  \u003cNotivue v-slot=\"item\"\u003e\n    \u003c!-- Your notification 👇 --\u003e\n    \u003cdiv class=\"rounded-full flex py-2 pl-3 bg-slate-700 text-slate-50 text-sm\"\u003e\n      \u003cp :role=\"item.ariaRole\" :aria-live=\"item.ariaLive\" aria-atomic=\"true\"\u003e\n        {{ item.message }}\n      \u003c/p\u003e\n\n      \u003cbutton\n        @click=\"item.clear\"\n        aria-label=\"Dismiss\"\n        class=\"pl-3 pr-2 hover:text-red-300 transition-colors\"\n        tabindex=\"-1\"\n      \u003e\n        \u003csvg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          fill=\"currentColor\"\n          class=\"w-5 h-5\"\n          aria-hidden=\"true\"\n        \u003e\n          \u003cpath\n            d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\"\n          /\u003e\n        \u003c/svg\u003e\n      \u003c/button\u003e\n    \u003c/div\u003e\n  \u003c/Notivue\u003e\n\n  \u003c!-- RouterView, etc. --\u003e\n\u003c/template\u003e\n```\n\n\u003c/details\u003e\n\n\u003cbr /\u003e\n\n## Nuxt\n\n**nuxt.config.ts**\n\n```ts\nexport default defineNuxtConfig({\n  modules: ['notivue/nuxt'],\n  css: [\n    'notivue/notification.css', // Only needed if using built-in \u003cNotification /\u003e\n    'notivue/animations.css' // Only needed if using default animations\n  ],\n  notivue: {\n    // Options\n  }\n})\n```\n\n**app.vue**\n\n```vue\n\u003ctemplate\u003e\n  \u003cbutton @click=\"push.success('Hi! I am your first notification!')\"\u003ePush\u003c/button\u003e\n\n  \u003cNotivue v-slot=\"item\"\u003e\n    \u003cNotification :item=\"item\" /\u003e\n  \u003c/Notivue\u003e\n\n  \u003c!-- NuxtLayout, NuxtPage, etc. --\u003e\n\u003c/template\u003e\n```\n\n\u003cbr /\u003e\n\n## Thanks\n\n- [Ionic Team](https://ionic.io/) for the icons\n- [Uktash Verna](https://github.com/n3r4zzurr0) for the animated spinner\n\n\u003cbr /\u003e\n\n## License\n\nMIT\n","funding_links":["https://polar.sh/smastrom","https://buymeacoffee.com/smastrom"],"categories":["Components \u0026 Libraries","TypeScript"],"sub_categories":["UI Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmastrom%2Fnotivue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmastrom%2Fnotivue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmastrom%2Fnotivue/lists"}