{"id":22490349,"url":"https://github.com/emmanuelsw/notiwind","last_synced_at":"2025-08-02T22:32:53.333Z","repository":{"id":37235521,"uuid":"369394904","full_name":"emmanuelsw/notiwind","owner":"emmanuelsw","description":"A headless Vue 3 notification library to use with Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2024-04-16T13:34:22.000Z","size":455,"stargazers_count":278,"open_issues_count":2,"forks_count":28,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-12-01T15:12:30.503Z","etag":null,"topics":["notifications","tailwindcss","tailwindui","toast","vite","vue3"],"latest_commit_sha":null,"homepage":"https://notiwind-demo.netlify.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/emmanuelsw.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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}},"created_at":"2021-05-21T02:44:59.000Z","updated_at":"2024-11-25T11:34:10.000Z","dependencies_parsed_at":"2024-04-16T14:47:32.904Z","dependency_job_id":"6e6a27c8-ae7a-4ec4-8912-8ed8cbcfc52a","html_url":"https://github.com/emmanuelsw/notiwind","commit_stats":{"total_commits":25,"total_committers":4,"mean_commits":6.25,"dds":0.36,"last_synced_commit":"0dc9fd072803e4e0533e623b1be544463388907e"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emmanuelsw%2Fnotiwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emmanuelsw%2Fnotiwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emmanuelsw%2Fnotiwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emmanuelsw%2Fnotiwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emmanuelsw","download_url":"https://codeload.github.com/emmanuelsw/notiwind/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228501095,"owners_count":17930190,"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":["notifications","tailwindcss","tailwindui","toast","vite","vue3"],"created_at":"2024-12-06T17:22:06.179Z","updated_at":"2025-08-02T22:32:53.321Z","avatar_url":"https://github.com/emmanuelsw.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# Notiwind\n\n\u003ca href=\"https://www.npmjs.com/package/notiwind\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/notiwind.svg?color=41b883\" alt=\"Npm Version\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://bundlephobia.com/package/notiwind\"\u003e\n  \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/notiwind\" alt=\"Size\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/emmanuelsw/notiwind/blob/master/LICENSE\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/license-MIT-428F7E.svg\" alt=\"License\"\u003e\n\u003c/a\u003e\n\nA headless Vue 3 notification library to use with Tailwind CSS.\nThis is a fork and port of [vue3-vt-notifications](https://github.com/killmenot/vue3-vt-notifications) created and modified by [killmenot](https://github.com/killmenot) to support Vue 3. Initially created by [sansil](https://github.com/sansil).\n\n## 🌟 Features\n\n- 100% Customizable\n- Composition API support\n- Create different groups of notifications\n- Permanent and stay on hover options\n\n## 🤖 Demo\n\n[Live Preview](https://notiwind-demo.netlify.app)\n\n## ⚡️ Installation\n\n```bash\npnpm add notiwind\n```\n\nor\n\n```bash\nnpm i notiwind\n```\n\nYou can then register `Notifications` as a Vue plugin:\n\n```js\nimport { createApp } from 'vue'\nimport Notifications from 'notiwind'\nimport App from './App.vue'\n\ncreateApp(App).use(Notifications).mount('#app')\n```\n\n## 🍞 How to use\n\nAdd the notification components to your main layout or in `App.vue`:\n\n```vue\n\u003cNotificationGroup group=\"foo\"\u003e\n  \u003c!-- Here put your notifications wrapper box --\u003e\n  ...\n  \u003cNotification v-slot=\"{ notifications }\"\u003e\n    \u003c!-- Here put your notification layout --\u003e\n    ...\n  \u003c/Notification\u003e\n\u003c/NotificationGroup\u003e\n```\n\nThen, trigger notifications from your `.vue` files:\n\n###### Options API\n\n```javascript\nthis.$notify(\n  {\n    group: 'foo',\n    title: 'Success',\n    text: 'Your account was registered!',\n  },\n  2000,\n) // 2s\n```\n\n###### Composition API\n\n```javascript\nimport { notify } from 'notiwind'\n\nnotify(\n  {\n    group: 'foo',\n    title: 'Success',\n    text: 'Your account was registered!',\n  },\n  4000,\n) // 4s\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 items-start justify-end p-6 px-4 py-6 pointer-events-none\"\n  \u003e\n    \u003cdiv class=\"w-full max-w-sm\"\u003e\n      \u003cNotification\n        v-slot=\"{ notifications }\"\n        enter=\"transform ease-out duration-300 transition\"\n        enter-from=\"translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-4\"\n        enter-to=\"translate-y-0 opacity-100 sm:translate-x-0\"\n        leave=\"transition ease-in duration-500\"\n        leave-from=\"opacity-100\"\n        leave-to=\"opacity-0\"\n        move=\"transition duration-500\"\n        move-delay=\"delay-300\"\n      \u003e\n        \u003cdiv\n          class=\"flex w-full max-w-sm mx-auto mt-4 overflow-hidden bg-white rounded-lg shadow-md\"\n          v-for=\"notification in notifications\"\n          :key=\"notification.id\"\n        \u003e\n          \u003cdiv class=\"flex items-center justify-center w-12 bg-green-500\"\u003e\n            \u003csvg class=\"w-6 h-6 text-white fill-current\" 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.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z\" /\u003e\n            \u003c/svg\u003e\n          \u003c/div\u003e\n\n          \u003cdiv class=\"px-4 py-2 -mx-3\"\u003e\n            \u003cdiv class=\"mx-3\"\u003e\n              \u003cspan class=\"font-semibold text-green-500\"\u003e{{ notification.title }}\u003c/span\u003e\n              \u003cp class=\"text-sm text-gray-600\"\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  {\n    group: 'foo',\n    title: 'Success',\n    text: 'Your account was registered!',\n  },\n  2000,\n) // 2s\n```\n\nThe first argument is an object containing the data for the `Notification` element, it's 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\nIf you need to keep the notification on the screen forever use `-1` as a timeout:\n\n```javascript\nthis.$notify(\n  {\n    group: 'foo',\n    title: 'Success',\n    text: 'Your account was registered!',\n  },\n  -1,\n) // it's not going to disappear automatically\n```\n\n### Example with differents groups\n\nYou can use the `NotificationGroup` component to have different types of notifications. For example, notifications 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 items-start justify-end p-6 px-4 py-6 pointer-events-none\"\n  \u003e\n    \u003cdiv class=\"w-full max-w-sm\"\u003e\n      \u003cNotification\n        v-slot=\"{ notifications }\"\n        enter=\"transform ease-out duration-300 transition\"\n        enter-from=\"translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-4\"\n        enter-to=\"translate-y-0 opacity-100 sm:translate-x-0\"\n        leave=\"transition ease-in duration-500\"\n        leave-from=\"opacity-100\"\n        leave-to=\"opacity-0\"\n        move=\"transition duration-500\"\n        move-delay=\"delay-300\"\n      \u003e\n        \u003cdiv\n          class=\"flex w-full max-w-sm mx-auto mt-4 overflow-hidden bg-white rounded-lg shadow-md\"\n          v-for=\"notification in notifications\"\n          :key=\"notification.id\"\n        \u003e\n        \u003cdiv class=\"flex items-center justify-center w-12 bg-red-500\"\u003e\n          \u003csvg class=\"w-6 h-6 text-white fill-current\" 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=\"px-4 py-2 -mx-3\"\u003e\n          \u003cdiv class=\"mx-3\"\u003e\n            \u003cspan class=\"font-semibold text-red-500\"\u003e{{ notification.title }}\u003c/span\u003e\n            \u003cp class=\"text-sm text-gray-600\"\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 items-start justify-end p-6 px-4 py-6 pointer-events-none\"\n  \u003e\n    \u003cdiv class=\"w-full max-w-sm\"\u003e\n      \u003cNotification\n        v-slot=\"{ notifications }\"\n        enter=\"transform ease-out duration-300 transition\"\n        enter-from=\"translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-4\"\n        enter-to=\"translate-y-0 opacity-100 sm:translate-x-0\"\n        leave=\"transition ease-in duration-500\"\n        leave-from=\"opacity-100\"\n        leave-to=\"opacity-0\"\n        move=\"transition duration-500\"\n        move-delay=\"delay-300\"\n      \u003e\n        \u003cdiv\n          class=\"flex w-full max-w-sm mx-auto mt-4 overflow-hidden bg-white rounded-lg shadow-md\"\n          v-for=\"notification in notifications\"\n          :key=\"notification.id\"\n        \u003e\n          \u003cdiv class=\"flex items-center justify-center w-12 bg-blue-500\"\u003e\n            \u003csvg class=\"w-6 h-6 text-white fill-current\" 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\n          \u003cdiv class=\"px-4 py-2 -mx-3\"\u003e\n            \u003cdiv class=\"mx-3\"\u003e\n              \u003cspan class=\"font-semibold text-blue-500\"\u003e{{ notification.title }}Info\u003c/span\u003e\n              \u003cp class=\"text-sm text-gray-600\"\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 notification\nthis.$notify(\n  {\n    group: 'error',\n    title: 'Error',\n    text: 'Your email is already used!',\n  },\n  4000,\n)\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 notifications\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 items-start justify-end p-6 px-4 py-6 pointer-events-none\"\u003e\n    \u003cdiv class=\"w-full max-w-sm\"\u003e\n      \u003cNotification\n        v-slot=\"{ notifications }\"\n        enter=\"transform ease-out duration-300 transition\"\n        enter-from=\"translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-4\"\n        enter-to=\"translate-y-0 opacity-100 sm:translate-x-0\"\n        leave=\"transition ease-in duration-500\"\n        leave-from=\"opacity-100\"\n        leave-to=\"opacity-0\"\n        move=\"transition duration-500\"\n        move-delay=\"delay-300\"\n      \u003e\n        \u003cdiv v-for=\"notification in notifications\" :key=\"notification.id\"\u003e\n          \u003cdiv\n            v-if=\"notification.type === 'info'\"\n            class=\"flex w-full max-w-sm mx-auto mt-4 overflow-hidden bg-white rounded-lg shadow-md\"\n          \u003e\n            \u003cdiv class=\"flex items-center justify-center w-12 bg-blue-500\"\u003e\n              \u003csvg\n                class=\"w-6 h-6 text-white fill-current\"\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=\"px-4 py-2 -mx-3\"\u003e\n              \u003cdiv class=\"mx-3\"\u003e\n                \u003cspan class=\"font-semibold text-blue-500\"\u003e{{ notification.title }}\u003c/span\u003e\n                \u003cp class=\"text-sm text-gray-600\"\u003e{{ notification.text }}\u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n\n          \u003cdiv\n            class=\"flex w-full max-w-sm mx-auto mt-4 overflow-hidden bg-white rounded-lg shadow-md\"\n            v-if=\"notification.type === 'warning'\"\n          \u003e\n            \u003cdiv class=\"flex items-center justify-center w-12 bg-yellow-500\"\u003e\n              \u003csvg\n                class=\"w-6 h-6 text-white fill-current\"\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=\"px-4 py-2 -mx-3\"\u003e\n              \u003cdiv class=\"mx-3\"\u003e\n                \u003cspan class=\"font-semibold text-yellow-500\"\u003e{{ notification.title }}\u003c/span\u003e\n                \u003cp class=\"text-sm text-gray-600\"\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 notification\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\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\n##### Props for the `Notification` component, all are optional.\n\n| Name             | Type   | Default | Description                                                                        |\n| ---------------- | ------ | ------- | ---------------------------------------------------------------------------------- |\n| maxNotifications | Number | 10      | Maximum notifications displayed simultaneously                                     |\n| enter            | String | \"\"      | _enter-active-class_ transition classes. Applied during the entire entering phase. |\n| enterFrom        | String | \"\"      | _enter-from-class_ transition classes. Starting state for enter.                   |\n| enterTo          | String | \"\"      | _enter-to-class_ transition classes. Ending state for enter.                       |\n| leave            | String | \"\"      | _leave-active-class_ transition classes. Applied during the entire leaving phase.  |\n| leaveFrom        | String | \"\"      | _leave-from-class_ transition classes. Starting state for leave.                   |\n| leaveTo          | String | \"\"      | _leave-to-class_ transition classes. Ending state for leave.                       |\n| move             | String | \"\"      | _move-class_ transition classes. Added when items are changing positions.          |\n| moveDelay        | String | \"\"      | Delay between the position change. `delay-300` recommended value.                  |\n\nCheck the Vue docs to know more about [Enter \u0026 Leave Transitions](https://v3.vuejs.org/guide/transitions-enterleave.html#transition-classes) and [List Move Transitions](https://v3.vuejs.org/guide/transitions-list.html#list-move-transitions).\n\n##### Props for `NotificationGroup` component, all are optional.\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 slots\n\nScope props:\n\n| Name          | Type     | Description                                                                                                                                                                               |\n| ------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| notifications | Array    | Array of notification objects.                                                                                                                                                            |\n| close         | Function | Closes the notification. Expects the notification ID as parameter                                                                                                                         |\n| hovering      | Function | Prevents notification from closing if being hovered. Expected the notification ID, the hover value (true or false) and optionally, a timeout to be used in the mouse leave (hover ended). |\n\n### Example\n\n```vue\n\u003cNotification\n  v-slot=\"{ notifications, close, hovering }\"\n  enter=\"transform ease-out duration-300 transition\"\n  enter-from=\"translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-4\"\n  enter-to=\"translate-y-0 opacity-100 sm:translate-x-0\"\n  leave=\"transition ease-in duration-500\"\n  leave-from=\"opacity-100\"\n  leave-to=\"opacity-0\"\n  move=\"transition duration-500\"\n  move-delay=\"delay-300\"\n\u003e\n  \u003cdiv\n    v-for=\"notification in notifications\"\n    :key=\"notification.id\"\n    class=\"relative px-4 py-3 mt-4 text-red-700 bg-red-100 border border-red-400 rounded\"\n    role=\"alert\"\n    @mouseover=\"hovering(notification.id, true)\"\n    @mouseleave=\"hovering(notification.id, false)\"\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=\"w-6 h-6 text-red-500 fill-current\"\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## Typescript\n\nTyped notifications supported using the Composition API only.\n\n```typescript\n// notiwind.ts\nimport { createNotifier, NotificationGroup, defineNotificationComponent } from 'notiwind'\n\nexport type NotificationSchema = {\n  title: string\n  text: string\n}\n\nexport const notify = createNotifier\u003cNotificationSchema\u003e()\nexport const Notification = defineNotificationComponent\u003cNotificationSchema\u003e()\nexport { NotificationGroup }\n```\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { notify, Notification, NotificationGroup } from './notiwind.ts'\n\nnotify(\n  {\n    title: 'title',\n    text: 'text',\n  },\n  4000,\n)\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cNotificationGroup\u003e\n    \u003cNotification v-slot=\"{ notifications }\"\u003e\n      \u003c!-- Here you have typed `notifications` --\u003e\n    \u003c/Notification\u003e\n  \u003c/NotificationGroup\u003e\n\u003c/template\u003e\n```\n\n## TODO\n\n- Add tests\n\n## Contributing\n\n1. Fork it\n2. Create your feature branch (`git checkout -b my-new-feature`)\n3. Commit your changes (`git commit -am 'Added some feature'`)\n4. Push to the branch (`git push origin my-new-feature`)\n5. Create new Pull Request\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femmanuelsw%2Fnotiwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femmanuelsw%2Fnotiwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femmanuelsw%2Fnotiwind/lists"}