{"id":13810577,"url":"https://github.com/sansil/vt-notifications","last_synced_at":"2025-05-14T10:34:08.476Z","repository":{"id":50601356,"uuid":"294200390","full_name":"sansil/vt-notifications","owner":"sansil","description":"A headless vue notification library to use with tailwind","archived":false,"fork":false,"pushed_at":"2022-11-03T00:05:23.000Z","size":204,"stargazers_count":90,"open_issues_count":3,"forks_count":17,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-09T08:40:17.175Z","etag":null,"topics":["tailwindcss","tailwindui","vue","vuejs"],"latest_commit_sha":null,"homepage":"","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/sansil.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},"funding":{"github":"sansil"}},"created_at":"2020-09-09T18:46:50.000Z","updated_at":"2024-11-04T02:40:04.000Z","dependencies_parsed_at":"2023-01-21T12:48:39.435Z","dependency_job_id":null,"html_url":"https://github.com/sansil/vt-notifications","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sansil%2Fvt-notifications","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sansil%2Fvt-notifications/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sansil%2Fvt-notifications/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sansil%2Fvt-notifications/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sansil","download_url":"https://codeload.github.com/sansil/vt-notifications/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254121249,"owners_count":22018130,"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":["tailwindcss","tailwindui","vue","vuejs"],"created_at":"2024-08-04T02:01:00.968Z","updated_at":"2025-05-14T10:34:03.455Z","avatar_url":"https://github.com/sansil.png","language":"Vue","funding_links":["https://github.com/sponsors/sansil"],"categories":["Vue"],"sub_categories":[],"readme":"\u003c!-- [![](https://img.shields.io/npm/v/vt-notifications.svg?logo=npm\u0026style=flat-square)](https://www.npmjs.com/package/vt-notifications) --\u003e\n\n[![](https://img.shields.io/github/license/sansil/vt-notifications?style=flat-square)](https://github.com/sansil/vt-notifications)\n\n[![](https://img.shields.io/npm/dt/vt-notifications.svg?style=flat-square)](https://www.npmjs.com/package/vt-notifications)\n\n# vt-notifications\n\nA headless vue notification library to use with tailwind\n\n## 🌟 Features\n\n- 100% customizable\n- Create different groups of notifications\n- Built in transitions\n\n## 🤖 Demo\n\n[Live demo](https://codesandbox.io/s/vue-tailwind-notifications-i4tgd?file=/src/App.vue)\n\n## ⚡️ Installation\n\n```bash\nyarn add vt-notifications\n```\n\nor\n\n```bash\nnpm i vt-notifications\n```\n\nYou can then register Notifications as a Vue plugin.\n\n```js\nimport Vue from \"vue\";\nimport Notifications from \"vt-notifications\";\n\nVue.use(Notifications);\n```\n\n## 🍞 How to use\n\n```vue\n\u003cnotificationGroup group=\"foo\"\u003e\n// Here put your notifications wrapper box\n...\n\u003cnotification v-slot=\"{notifications}\"\u003e\n// Here put your notification layout\n...\n\u003c/notification\u003e\n\u003c/notificationGroup\u003e\n```\n\n### Basic example\n\nFor example in your App.vue\n\n```vue\n\u003cnotificationGroup group=\"foo\"\u003e\n  \u003cdiv\n    class=\"fixed inset-0 flex px-4 py-6 pointer-events-none p-6 items-start justify-end\"\n  \u003e\n    \u003cdiv class=\"max-w-sm w-full\"\u003e\n      \u003cnotification v-slot=\"{notifications}\"\u003e\n        \u003cdiv\n          class=\"flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden mt-4\"\n          v-for=\"notification in notifications\"\n          :key=\"notification.id\"\n        \u003e\n          \u003cdiv class=\"flex justify-center items-center w-12 bg-green-500\"\u003e\n            \u003csvg\n              class=\"h-6 w-6 fill-current text-white\"\n              viewBox=\"0 0 40 40\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            \u003e\n              \u003cpath\n                d=\"M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z\"\n              /\u003e\n            \u003c/svg\u003e\n          \u003c/div\u003e\n\n          \u003cdiv class=\"-mx-3 py-2 px-4\"\u003e\n            \u003cdiv class=\"mx-3\"\u003e\n              \u003cspan class=\"text-green-500 font-semibold\"\u003e{{notification.title}}\u003c/span\u003e\n              \u003cp class=\"text-gray-600 text-sm\"\u003e{{notification.text}}\u003c/p\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/notification\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/notificationGroup\u003e\n```\n\nThen in any of your vue files:\n\n```javascript\nthis.$notify(\n  { group: \"foo\", title: \"Success\", text: \"Your account was registered!\" },\n  2000\n); // 2s\n```\n\nThe first argument is an object containing the data for the `notification` layout, it important to specify the group where the notificatoins are going to be displayed, the second argument is the timeout. The default timeout is 3 seconds.\n\n### Example with differents groups\n\nYou can use `notificationGroup` component to have different types of notifcations. For example, notifcations error messages in top center and generic app notifications in bottom-right corner\n\n```vue\n\u003cnotificationGroup group=\"error\"\u003e\n  \u003cdiv\n    class=\"fixed inset-0 flex px-4 py-6 pointer-events-none p-6 items-start justify-end\"\n  \u003e\n    \u003cdiv class=\"max-w-sm w-full\"\u003e\n      \u003cnotification v-slot=\"{notifications}\"\u003e\n        \u003cdiv\n          class=\"flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden mt-4\"\n          v-for=\"notification in notifications\"\n          :key=\"notification.id\"\n        \u003e\n        \u003cdiv class=\"flex justify-center items-center w-12 bg-red-500\"\u003e\n            \u003csvg class=\"h-6 w-6 fill-current text-white\" viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n                \u003cpath d=\"M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z\"/\u003e\n            \u003c/svg\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"-mx-3 py-2 px-4\"\u003e\n            \u003cdiv class=\"mx-3\"\u003e\n                \u003cspan class=\"text-red-500 font-semibold\"\u003e{{notification.title}}\u003c/span\u003e\n                \u003cp class=\"text-gray-600 text-sm\"\u003e{{notification.text}}\u003c/p\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/notification\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/notificationGroup\u003e\n\n\u003cnotificationGroup group=\"generic\"\u003e\n  \u003cdiv\n    class=\"fixed inset-0 flex px-4 py-6 pointer-events-none p-6 items-start justify-end\"\n  \u003e\n    \u003cdiv class=\"max-w-sm w-full\"\u003e\n      \u003cnotification v-slot=\"{notifications}\"\u003e\n        \u003cdiv\n          class=\"flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden mt-4\"\n          v-for=\"notification in notifications\"\n          :key=\"notification.id\"\n        \u003e\n          \u003cdiv class=\"flex justify-center items-center w-12 bg-blue-500\"\u003e\n              \u003csvg class=\"h-6 w-6 fill-current text-white\" viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n                  \u003cpath d=\"M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z\"/\u003e\n              \u003c/svg\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"-mx-3 py-2 px-4\"\u003e\n            \u003cdiv class=\"mx-3\"\u003e\n                \u003cspan class=\"text-blue-500 font-semibold\"\u003e{{notification.title}}Info\u003c/span\u003e\n                \u003cp class=\"text-gray-600 text-sm\"\u003e{{notification.text}}\u003c/p\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/notification\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/notificationGroup\u003e\n```\n\nThen in any of your vue files:\n\n```javascript\n// error notifcation\nthis.$notify(\n  { group: \"error\", title: \"Error\", text: \"Your email is already used!\" },\n  4000\n);\n// generic notification\nthis.$notify(\n  {\n    group: \"generic\",\n    title: \"Info\",\n    text: \"This channel archived by the owner\",\n  },\n  4000\n);\n```\n\n### Using different types of notifcations\n\nYou can render different types of notifications in the same group using a conditional, for example `v-if=\"notification.type==='info'\"`\n\n```vue\n\u003cnotificationGroup group=\"foo\"\u003e\n  \u003cdiv class=\"fixed inset-0 flex px-4 py-6 pointer-events-none p-6 items-start justify-end\"\u003e\n    \u003cdiv class=\"max-w-sm w-full\"\u003e\n      \u003cnotification v-slot=\"{notifications}\"\u003e\n        \u003cdiv v-for=\"notification in notifications\" :key=\"notification.id\"\u003e\n          \u003cdiv\n            v-if=\"notification.type==='info'\"\n            class=\"flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden mt-4\"\n          \u003e\n            \u003cdiv class=\"flex justify-center items-center w-12 bg-blue-500\"\u003e\n              \u003csvg\n                class=\"h-6 w-6 fill-current text-white\"\n                viewBox=\"0 0 40 40\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              \u003e\n                \u003cpath\n                  d=\"M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z\"\n                /\u003e\n              \u003c/svg\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"-mx-3 py-2 px-4\"\u003e\n              \u003cdiv class=\"mx-3\"\u003e\n                \u003cspan class=\"text-blue-500 font-semibold\"\u003e{{notification.title}}\u003c/span\u003e\n                \u003cp class=\"text-gray-600 text-sm\"\u003eT{{notification.text}}\u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003cdiv\n            class=\"flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden mt-4\"\n            v-if=\"notification.type==='warning'\"\n          \u003e\n            \u003cdiv class=\"flex justify-center items-center w-12 bg-yellow-500\"\u003e\n              \u003csvg\n                class=\"h-6 w-6 fill-current text-white\"\n                viewBox=\"0 0 40 40\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              \u003e\n                \u003cpath\n                  d=\"M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z\"\n                /\u003e\n              \u003c/svg\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"-mx-3 py-2 px-4\"\u003e\n              \u003cdiv class=\"mx-3\"\u003e\n                \u003cspan class=\"text-yellow-500 font-semibold\"\u003e{{notification.title}}\u003c/span\u003e\n                \u003cp class=\"text-gray-600 text-sm\"\u003e{{notification.text}}\u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/notification\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/notificationGroup\u003e\n```\n\nThen in any of your vue files:\n\n```javascript\n// error notifcation\nthis.$notify(\n  {\n    title: \"Info\",\n    text: \"This channel archived by the owner!\",\n    type: \"info\",\n    group: \"foo\",\n  },\n  4000\n);\n// generic notification\nthis.$notify(\n  {\n    title: \"Warning\",\n    text: \"Your image size is too large!\",\n    type: \"warning\",\n    group: \"foo\",\n  },\n  4000\n);\n```\n\n## Props\n\nProps for **notification component**, all are opcional.\n\n| Name                   | Type   | Default                                                                                                                                                                                                                                                                                                                                                                                                                      | Description                                    |\n| ---------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |\n| maxNotifications       | Number | 10                                                                                                                                                                                                                                                                                                                                                                                                                           | Maximum notifications displayed simultaneously |\n| transitionGroupClasses | Object | {enterActiveClassDelayed:\"transform ease-out duration-300 transition delay-300\",enterActiveClass:\"transform ease-out duration-300 transition\",enterClass:\"translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-4\",enterToClass:\"translate-y-0 opacity-100 sm:translate-x-0\",leaveActiveClass:\"transition ease-in duration-500\",leaveClass:\"opacity-100\",leaveToClass: \"opacity-0\", moveClass: \"transition duration-500 \"} | Classes for the transition-group component     |\n\nProps for **notification group component**, all are opcional.\n\n| Name     | Type   | Description                             |\n| -------- | ------ | --------------------------------------- |\n| position | String | \"bottom\" or \"top are the posible values |\n| group    | String | Name of the group of notifications      |\n\n## Defualt scoped slot\n\nScope props:\n\n| Name          | Type     | Description                                                              |\n| ------------- | -------- | ------------------------------------------------------------------------ |\n| notifications | Array    | Arrya of notification object                                             |\n| close         | Function | when called closes the notification. Expect the notification id as input |\n\n### Example\n\n```vue\n\u003cnotification v-slot=\"{ notifications, close }\"\u003e\n  \u003cdiv\n    v-for=\"notification in notifications\"\n    :key=\"notification.id\"\n    class=\"bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mt-4\"\n    role=\"alert\"\n  \u003e\n    \u003cstrong class=\"font-bold\"\u003eHoly smokes!\u003c/strong\u003e\n    \u003cspan class=\"block sm:inline\"\u003eSomething seriously bad happened.\u003c/span\u003e\n\n    \u003cbutton @click=\"close(notification.id)\" class=\"absolute top-0 bottom-0 right-0 px-4 py-3\"\u003e\n      \u003csvg\n        class=\"fill-current h-6 w-6 text-red-500\"\n        role=\"button\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 20 20\"\n      \u003e\n        \u003ctitle\u003eClose\u003c/title\u003e\n        \u003cpath\n          d=\"M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z\"\n        /\u003e\n      \u003c/svg\u003e\n    \u003c/button\u003e\n  \u003c/div\u003e\n\u003c/notification\u003e\n```\n\n## Using the library in Nuxt.js\n\nTo get this library working in Nuxt.js you need to prepare a few things.\n\nCreate a new plugin in your Nuxt.js project `plugin/vt-notifications.js` and add the following:\n\n```js\nimport Vue from \"vue\";\nimport Notifications from \"vt-notifications\";\n\nVue.use(Notifications);\n```\n\nNow you need to add the plugin in your `nuxt.config.js` and add vt-notifications to the transpilation build step.\n\nAdd the following lines in your `nuxt.config.js`:\n\n```js\nplugins: [\n  { src: \"~/plugins/vt-notifications\" },\n],\nbuild: {\n  transpile: [\n    \"vt-notifications\"\n  ],\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsansil%2Fvt-notifications","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsansil%2Fvt-notifications","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsansil%2Fvt-notifications/lists"}