{"id":13459155,"url":"https://github.com/euvl/vue-notification","last_synced_at":"2025-05-07T11:52:55.610Z","repository":{"id":13464655,"uuid":"92395844","full_name":"euvl/vue-notification","owner":"euvl","description":":icecream: Vue.js 2 library for showing notifications","archived":false,"fork":false,"pushed_at":"2025-04-21T02:13:36.000Z","size":665,"stargazers_count":2395,"open_issues_count":0,"forks_count":213,"subscribers_count":26,"default_branch":"master","last_synced_at":"2025-04-30T11:59:16.177Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://vue-notification.yev.io/","language":"JavaScript","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/euvl.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":"euvl"}},"created_at":"2017-05-25T11:14:11.000Z","updated_at":"2025-04-28T09:56:28.000Z","dependencies_parsed_at":"2024-01-22T19:33:48.187Z","dependency_job_id":"2e9ae3ce-f89e-4aa0-86a3-99c85f63cff8","html_url":"https://github.com/euvl/vue-notification","commit_stats":{"total_commits":173,"total_committers":31,"mean_commits":5.580645161290323,"dds":"0.21387283236994215","last_synced_commit":"25a166d540f425b9420c22fcfca5e7c3e2eab4bd"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/euvl%2Fvue-notification","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/euvl%2Fvue-notification/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/euvl%2Fvue-notification/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/euvl%2Fvue-notification/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/euvl","download_url":"https://codeload.github.com/euvl/vue-notification/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252873974,"owners_count":21817710,"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-07-31T09:01:06.774Z","updated_at":"2025-05-07T11:52:55.583Z","avatar_url":"https://github.com/euvl.png","language":"JavaScript","funding_links":["https://github.com/sponsors/euvl","https://www.buymeacoffee.com/yev"],"categories":["JavaScript","Libraries \u0026 Plugins","UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["Popups, Alerts etc.","通知","UI Components","Notification"],"readme":"\u003cp align=\"right\"\u003e\n  \u003ca href=\"https://www.buymeacoffee.com/yev\" target=\"_blank\"\u003e\n  \u003cimg width=\"200\" alt=\"screen shot 2018-03-01 at 10 33 39\" src=\"https://user-images.githubusercontent.com/1577802/36840220-21beb89c-1d3c-11e8-98a4-45fc334842cf.png\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n[![npm version](https://badge.fury.io/js/vue-notification.svg)](https://badge.fury.io/js/vue-notification)\n[![npm](https://img.shields.io/npm/dm/vue-notification.svg)](https://www.npmjs.com/package/vue-notification)\n\n# Vue.js notifications\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://media.giphy.com/media/xUn3C6FmbGmszMem64/giphy.gif\"\u003e\n\u003c/p\u003e\n\n## Demo\n\n\n- http://vue-notification.yev.io/\n\n## Setup\n\n\n```bash\nnpm install --save vue-notification\n```\n\nAdd dependencies to your `main.js`:\n\n```javascript\nimport Vue           from 'vue'\nimport Notifications from 'vue-notification'\n\n/*\nor for SSR:\nimport Notifications from 'vue-notification/dist/ssr.js'\n*/\n\nVue.use(Notifications)\n```\n\nAdd the global component to your `App.vue`:\n\n```vue\n\u003cnotifications/\u003e\n```\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 Vue from 'vue'\n\nVue.notify({\n  title: 'Authorization',\n  text: 'You have been logged in!'\n})\n```\n\n## Usage\n\n### Nuxt.js\n\n#### nuxt.config.js\n\n```js\nplugins: [\n    { src: '~/plugins/notifications-ssr', ssr: true },\n    { src: '~/plugins/notifications-client', ssr: false }\n]\n```\n\n#### notifications-ssr.js\n\n```js\nimport Notifications from 'vue-notification/dist/ssr.js';\nimport Vue from 'vue';\n\nVue.use(Notifications);\n```\n\n#### notifications-client.js\n\n```js\nimport Notifications from 'vue-notification';\nimport Vue from 'vue';\n\nVue.use(Notifications);\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\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\nVue.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\n\u003e  **Note**: setting `componentName` can cause issues when using SSR.\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  \u0026.info { ... }\n  \u0026.error { ... }\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 slot=\"body\" slot-scope=\"{ item, close }\"\u003e\n    \u003cdiv class=\"my-notification\"\u003e\n      \u003cp class=\"title\"\u003e\n        {{ item.title }}\n      \u003c/p\u003e\n      \u003cbutton class=\"close\" @click=\"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```\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 Vue           from 'vue'\nimport Notifications from 'vue-notification'\nimport velocity      from 'velocity-animate'\n\nVue.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### Programatic closing\n\n```\nconst id = Date.now() // This can be any unique number\n\nVue.notify({\n  id,\n  text: 'This message will be removed immediately'\n});\n\nVue.notify.close(id);\n```\n\n## FAQ\n\nCheck closed issues with `FAQ` label to get answers for most asked questions.\n\n## Development\n\nTo run a local demo:\n\n```bash\n# run the demo\ncd demo\nnpm install\nnpm run dev\n```\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%2Feuvl%2Fvue-notification","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feuvl%2Fvue-notification","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feuvl%2Fvue-notification/lists"}