{"id":13810522,"url":"https://github.com/kyvg/vue3-notification","last_synced_at":"2025-07-30T21:04:25.823Z","repository":{"id":37495720,"uuid":"358052495","full_name":"kyvg/vue3-notification","owner":"kyvg","description":"Vue 3 notification library 💬","archived":false,"fork":false,"pushed_at":"2024-12-13T21:18:23.000Z","size":2195,"stargazers_count":390,"open_issues_count":0,"forks_count":69,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-15T00:51:38.857Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://kyvg.github.io/vue3-notification/","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/kyvg.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,"zenodo":null},"funding":{"github":"kyvg"}},"created_at":"2021-04-14T21:58:05.000Z","updated_at":"2025-04-08T09:57:11.000Z","dependencies_parsed_at":"2023-02-09T22:55:11.636Z","dependency_job_id":"aa72abae-a66a-4376-8985-08e9cbf37f00","html_url":"https://github.com/kyvg/vue3-notification","commit_stats":{"total_commits":254,"total_committers":41,"mean_commits":6.195121951219512,"dds":"0.46850393700787396","last_synced_commit":"1ebe835e532275d7f876c5331084011a51ae597d"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyvg%2Fvue3-notification","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyvg%2Fvue3-notification/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyvg%2Fvue3-notification/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyvg%2Fvue3-notification/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kyvg","download_url":"https://codeload.github.com/kyvg/vue3-notification/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254059510,"owners_count":22007769,"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-08-04T02:00:57.669Z","updated_at":"2025-05-14T03:09:40.841Z","avatar_url":"https://github.com/kyvg.png","language":"TypeScript","funding_links":["https://github.com/sponsors/kyvg"],"categories":["TypeScript","UI Components [🔝](#readme)","Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"[![npm](https://img.shields.io/npm/dm/@kyvg/vue3-notification)](https://www.npmjs.com/package/@kyvg/vue3-notification)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/@kyvg/vue3-notification)\n\n## Upgrade to v3.x\n### Breaking changes\n- `title` and `text` no longer render with [`v-html`](https://vuejs.org/api/built-in-directives.html#v-html). Use `dangerouslySetInnerHtml` prop to render `title` and `text` with [`v-html`](https://vuejs.org/api/built-in-directives.html#v-html)\n\n# Vue.js notifications\n\nThis is a fork and port of Vue 2 [vue-notifications](https://github.com/euvl/vue-notification) created by [euvl](https://github.com/euvl) to now support Vue 3. If you're using Vue 2.x use his version.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://media.giphy.com/media/xUn3C6FmbGmszMem64/giphy.gif\"\u003e\n\u003c/p\u003e\n\n## Setup\n\n```bash\nnpm install --save @kyvg/vue3-notification\n\nyarn add @kyvg/vue3-notification\n```\n\nAdd dependencies to your `main.js`:\n\n```javascript\nimport { createApp } from 'vue'\nimport Notifications from '@kyvg/vue3-notification'\n\nconst app = createApp({...})\napp.use(Notifications)\n```\n\nAdd the global component to your `App.vue`:\n\n```vue\n\u003cnotifications /\u003e\n```\n\nPlease note that this library does not inherently support Nuxt 3. To enable compatibility with Nuxt 3, use the [`nuxt3-notifications`](https://github.com/windx-foobar/nuxt3-notifications) wrapper\n## Usage\n\nTrigger notifications from your `.vue` files:\n\n```javascript\n// simple\nthis.$notify(\"Hello user!\");\n\n// using options\nthis.$notify({\n  title: \"Important message\",\n  text: \"Hello user!\",\n});\n```\n\nOr trigger notifications from other files, for example, your router:\n\n```javascript\nimport { notify } from \"@kyvg/vue3-notification\";\n\nnotify({\n  title: \"Authorization\",\n  text: \"You have been logged in!\",\n});\n```\n\nOr use Composition API style:\n\n```javascript\nimport { useNotification } from \"@kyvg/vue3-notification\";\n\nconst { notify }  = useNotification()\n\nnotify({\n  title: \"Authorization\",\n  text: \"You have been logged in!\",\n});\n```\n### Migration\n\n#### Vue 2.x syntax\n\n```javascript\nVue.notify({\n  title: \"Vue 2 notification\",\n});\n```\n\n#### Vue 3.x syntax\n\n```javascript\nimport { notify } from \"@kyvg/vue3-notification\";\n\nnotify({\n  title: \"Vue 3 notification 🎉\",\n});\n```\n\n#### Vue 3.x Composition API syntax\n\n```javascript\nimport { useNotification } from \"@kyvg/vue3-notification\";\n\nconst notification = useNotification()\n\nnotification.notify({\n  title: \"Vue 3 notification 🎉\",\n});\n```\n\nAlso you can use [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)\n```javascript\nimport { useNotification } from \"@kyvg/vue3-notification\";\n\nconst { notify } = useNotification()\n\nnotify({\n  title: \"Vue 3 notification 🎉\",\n});\n```\n\n### Component props\n\nThe majority of settings for the Notifications component are configured using props:\n\n```vue\n\u003cnotifications position=\"bottom right\" classes=\"my-custom-class\" /\u003e\n```\n\nNote that all props are optional.\n\n| Name             | Type          | Default            | Description                                                                                                             |\n| ---------------- | ------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------- |\n| position                | String/Array  | 'top right'        | Part of the screen where notifications will pop out                                                                     |\n| width                   | Number/String | 300                | Width of notification holder, can be `%`, `px` string or number.\u003cbr\u003eValid values: '100%', '200px', 200                  |\n| classes                 | String/Array  | 'vue-notification' | List of classes that will be applied to notification element                                                            |\n| group                   | String        | null               | Name of the notification holder, if specified                                                                           |\n| duration                | Number        | 3000               | Time (in ms) to keep the notification on screen (if **negative** - notification will stay **forever** or until clicked) |\n| speed                   | Number        | 300                | Time (in ms) to show / hide notifications                                                                               |\n| animation-type          | String        | 'css'              | Type of animation, currently supported types are `css` and `velocity`                                                   |\n| animation-name          | String        | null               | Animation name required for `css` animation                                                                             |\n| animation               | Object        | Custom             | Animation configuration for [Velocity](#Animation]) animation                                                           |\n| max                     | Number        | Infinity           | Maximum number of notifications that can be shown in notification holder                                                |\n| reverse                 | Boolean       | false              | Show notifications in reverse order                                                                                     |\n| ignoreDuplicates        | Boolean       | false              | Ignore repeated instances of the same notification                                                                      |\n| closeOnClick            | Boolean       | true               | Close notification when clicked                                                                                         |\n| pauseOnHover            | Boolean       | false              | Keep the notification open while mouse hovers on notification                                                           |\n| dangerouslySetInnerHtml | Boolean       | false              | Use [v-html](https://vuejs.org/api/built-in-directives.html#v-html) to set `title` and `text` |\n\n### Component events\n| Name             | Type                             | Description                                  |\n| ---------------- | -------------------------------- | -------------------------------------------- |\n| click            | (item: NotificationItem) =\u003e void | The callback function that is triggered when notification was clicked\n| destroy          | (item: NotificationItem) =\u003e void | The callback function that is triggered when notification was destroyes\n| start            | (item: NotificationItem) =\u003e void | The callback function that is triggered when notification was appeared\n### API\n\nNotifications are triggered via the API:\n\n```javascript\n  this.$notify({\n    // (optional)\n    // Name of the notification holder\n    group: 'foo',\n\n    // (optional)\n    // Title (will be wrapped in div.notification-title)\n    title: 'This is the \u003cem\u003etitle\u003c/em\u003e',\n\n    // Content (will be wrapped in div.notification-content)\n    text: 'This is some \u003cb\u003econtent\u003c/b\u003e',\n\n    // (optional)\n    // Class that will be assigned to the notification\n    type: 'warn',\n\n    // (optional, override)\n    // Time (in ms) to keep the notification on screen\n    duration: 10000,\n\n    // (optional, override)\n    // Time (in ms) to show / hide notifications\n    speed: 1000\n\n    // (optional)\n    // Data object that can be used in your template\n    data: {}\n  })\n```\n\nTo remove notifications, include the `clean: true` parameter.\n\n```javascript\nthis.$notify({\n  group: \"foo\", // clean only the foo group\n  clean: true,\n});\n```\n\n### Plugin Options\n\nConfigure the plugin itself using an additional options object:\n\n```js\napp.use(Notifications, { name: \"alert\" });\n```\n\nAll options are optional:\n\n| Name          | Type   | Default        | Description                                                                   |\n| ------------- | ------ |----------------|-------------------------------------------------------------------------------|\n| name          | String | notify         | Defines the instance name. It's prefixed with the dollar sign. E.g. `$notify` |\n| componentName | String | Notifications  | The component's name                                                          |\n | velocity      | Object | undefined      | A Velocity library object (see **Animation**)                                 |\n\n\u003e **Note**: setting `componentName` can cause issues when using SSR.\n\n## TypeScript Support\nThis library is written with TypeScript. Since the notification component is registered globally, you need to register its types.\n\nYou can do this manually:\n```ts\nimport type { FunctionalComponent } from 'vue';\nimport type { Notifications } from '@kyvg/vue3-notification';\ndeclare module 'vue' {\n  export interface GlobalComponents {\n    Notifications: FunctionalComponent\u003cNotifications\u003e;\n  }\n}\n```\nOr, you can use built-in `unplugin-vue-components` resolver. This resolver allows you to seamlessly integrate this library with Vue projects using [`unplugin-vue-components`](https://github.com/unplugin/unplugin-vue-components). It automates the import of components, making your development process more efficient.\n\n### Installation\nTo get started, install the necessary packages using npm or yarn:\n```bash\nnpm install --save @kyvg/vue3-notification unplugin-vue-components\n# or\nyarn add @kyvg/vue3-notification unplugin-vue-components\n```\n### Configuration\nTo configure the resolver, update your Vue project's plugin settings. For example, in a Vite project, modify vite.config.js:\n```js\nimport Components from 'unplugin-vue-components/vite';\nimport NotificationsResolver from '@kyvg/vue3-notification/auto-import-resolver';\n\nexport default {\n  plugins: [\n    Components({\n      resolvers: [NotificationsResolver()],\n    }),\n  ],\n}\n```\nSpecify the custom component's name if you have configured it:\n```js\n// main.js\n// ...\napp.use(Notifications, { componentName: \"Alert\" });\n```\nNote that component name should be in PascalCase\n\n```js\nimport Components from 'unplugin-vue-components/vite';\nimport NotificationsResolver from '@kyvg/vue3-notification/auto-import-resolver';\n\nexport default {\n  plugins: [\n    Components({\n      resolvers: [NotificationsResolver(\"Alert\")],\n    }),\n  ],\n}\n```\n## Features\n\n### Position\n\nPosition the component on the screen using the `position` prop:\n\n```vue\n\u003cnotifications position=\"bottom right\" /\u003e\n```\n\nIt requires a `string` with **two keywords** for vertical and horizontal postion.\n\nFormat: `\"\u003cvertical\u003e \u003chorizontal\u003e\"`.\n\n- Horizontal options: `left`, `center`, `right`\n- Vertical options: `top`, `bottom`\n\nDefault is `\"top right\"`.\n\n### Width\n\nWidth can be set using a `number` or `string` with optional `%` or `px` extensions:\n\n```vue\n\u003cnotifications :width=\"100\" /\u003e\n\u003cnotifications width=\"100\" /\u003e\n\u003cnotifications width=\"100%\" /\u003e\n\u003cnotifications width=\"100px\" /\u003e\n```\n\n### Type\n\nSet the `type` of a notification (**warn**, **error**, **success**, etc) by adding a `type` property to the call:\n\n```js\nthis.$notify({ type: \"success\", text: \"The operation completed\" });\n```\n\nThis will add the `type` (i.e. \"success\") as a CSS class name to the `.vue-notification` element.\n\nSee the [Styling](#styling) section for how to hook onto the class and style the popup.\n\n### Groups\n\nFor different classes of notifications, i.e...\n\n- authentication errors (top center)\n- app notifications (bottom-right)\n\n...specify the `group` attribute:\n\n```vue\n\u003cnotifications group=\"auth\" position=\"top\" /\u003e\n\u003cnotifications group=\"app\" position=\"bottom right\" /\u003e\n```\n\nTrigger a notification for a specific group by specifying it in the API call:\n\n```javascript\nthis.$notify({ group: \"auth\", text: \"Wrong password, please try again\" });\n```\n\n## Customisation\n\n### Styling\n\nVue Notifications comes with default styling, but it's easy to replace with your own.\n\nSpecify one or more class hooks via the `classes` prop on the global component:\n\n```vue\n\u003cnotifications classes=\"my-notification\" /\u003e\n```\n\nThis will add the supplied class/classes to individual notification elements:\n\n```html\n\u003cdiv class=\"vue-notification-wrapper\"\u003e\n  \u003cdiv class=\"vue-notification-template my-notification\"\u003e\n    \u003cdiv class=\"notification-title\"\u003eInfo\u003c/div\u003e\n    \u003cdiv class=\"notification-content\"\u003eYou have been logged in\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nThen include custom css rules to style the notifications:\n\n```scss\n// style of the notification itself\n.my-notification {\n  /*...*/\n\n  // style for title line\n  .notification-title {\n    /*...*/\n  }\n\n  // style for content\n  .notification-content {\n    /*...*/\n  }\n\n  // additional styling hook when using`type` parameter, i.e. this.$notify({ type: 'success', message: 'Yay!' })\n  \u0026.success {\n    /*...*/\n  }\n  \u0026.info {\n    /*...*/\n  }\n  \u0026.error {\n    /*...*/\n  }\n}\n```\n\nNote that the default rules are:\n\n```scss\n.vue-notification {\n  // styling\n  margin: 0 5px 5px;\n  padding: 10px;\n  font-size: 12px;\n  color: #ffffff;\n\n  // default (blue)\n  background: #44a4fc;\n  border-left: 5px solid #187fe7;\n\n  // types (green, amber, red)\n  \u0026.success {\n    background: #68cd86;\n    border-left-color: #42a85f;\n  }\n\n  \u0026.warn {\n    background: #ffb648;\n    border-left-color: #f48a06;\n  }\n\n  \u0026.error {\n    background: #e54d42;\n    border-left-color: #b82e24;\n  }\n}\n```\n\n### Content\n\nTo completely replace notification content, use Vue's slots system:\n\n```vue\n\u003cnotifications\u003e\n  \u003ctemplate #body=\"props\"\u003e\n    \u003cdiv class=\"my-notification\"\u003e\n      \u003cp class=\"title\"\u003e\n        {{ props.item.title }}\n      \u003c/p\u003e\n      \u003cbutton class=\"close\" @click=\"props.close\"\u003e\n        \u003ci class=\"fa fa-fw fa-close\"\u003e\u003c/i\u003e\n      \u003c/button\u003e\n      \u003cdiv v-html=\"props.item.text\"/\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n\u003c/notifications\u003e\n```\n\nThe `props` object has the following members:\n\n| Name  | Type     | Description                          |\n| ----- | -------- | ------------------------------------ |\n| item  | Object   | Notification object                  |\n| close | Function | A function to close the notification |\n\n\u003ca name=\"velocity_animation\"\u003e\u003c/a\u003e\n\n### Animation\n\nVue Notification can use the [Velocity](https://github.com/julianshapiro/velocity) library to power the animations using JavaScript.\n\nTo use, manually install `velocity-animate` \u0026 pass the library to the `vue-notification` plugin (the reason for doing that is to reduce the size of this plugin).\n\nIn your `main.js`:\n\n```javascript\nimport { createApp } from 'vue'\nimport Notifications from '@kyvg/vue3-notification'\nimport velocity from 'velocity-animate'\n\nconst app = createApp({...})\napp.use(Notifications, { velocity })\n```\n\nIn the template, set the `animation-type` prop:\n\n```vue\n\u003cnotifications animation-type=\"velocity\" /\u003e\n```\n\nThe default configuration is:\n\n```js\n{\n  enter: { opacity: [1, 0] },\n  leave: { opacity: [0, 1] }\n}\n```\n\nTo assign a custom animation, use the `animation` prop:\n\n```vue\n\u003cnotifications animation-type=\"velocity\" :animation=\"animation\" /\u003e\n```\n\nNote that `enter` and `leave` can be an `object` or a `function` that returns an `object`:\n\n```javascript\ncomputed: {\n  animation () {\n    return {\n      /**\n       * Animation function\n       *\n       * Runs before animating, so you can take the initial height, width, color, etc\n       * @param  {HTMLElement}  element  The notification element\n       */\n      enter (element) {\n        let height = element.clientHeight\n        return {\n          // animates from 0px to \"height\"\n          height: [height, 0],\n\n          // animates from 0 to random opacity (in range between 0.5 and 1)\n          opacity: [Math.random() * 0.5 + 0.5, 0]\n        }\n      },\n      leave: {\n        height: 0,\n        opacity: 0\n      }\n    }\n  }\n}\n```\n\n## Programatically Closing\n\n```javascript\n\nconst id = Date.now() // This can be any unique number\n\nthis.$notify({\n  id,\n  text: 'This message will be removed immediately'\n});\n\nthis.$notify.close(id);\n```\n\nOr with composition API style:\n\n```javascript\nimport { useNotification } from \"@kyvg/vue3-notification\"\n\nconst notification = useNotification()\n\nconst id = Date.now() // This can be any unique number\n\nnotification.notify({\n  id,\n  text: 'This message will be removed immediately'\n})\n\nnotification.notify.close(id)\n\n```\n\n## FAQ\n\nCheck closed issues with `FAQ` label to get answers for most asked questions.\n\n## Development\n\nTo contribute to the library:\n\n```bash\n# build main library\nnpm install\nnpm run build\n\n# run tests\nnpm run test\n\n# watch unit tests\nnpm run unit:watch\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyvg%2Fvue3-notification","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkyvg%2Fvue3-notification","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyvg%2Fvue3-notification/lists"}