{"id":13469737,"url":"https://github.com/se-panfilov/vue-notifications","last_synced_at":"2025-05-14T10:11:49.728Z","repository":{"id":44848762,"uuid":"69965960","full_name":"se-panfilov/vue-notifications","owner":"se-panfilov","description":"Vue.js agnostic library for non-blocking notifications","archived":false,"fork":false,"pushed_at":"2024-12-12T22:01:24.000Z","size":7667,"stargazers_count":697,"open_issues_count":29,"forks_count":54,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-11T08:37:03.531Z","etag":null,"topics":["javascript","message-bus","notifications","toast-message","toast-notifications","vue-notifications","vuejs"],"latest_commit_sha":null,"homepage":"https://se-panfilov.github.io/vue-notifications/","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/se-panfilov.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"publiccode":null,"codemeta":null}},"created_at":"2016-10-04T13:08:41.000Z","updated_at":"2025-02-15T18:01:30.000Z","dependencies_parsed_at":"2024-11-29T03:25:21.952Z","dependency_job_id":null,"html_url":"https://github.com/se-panfilov/vue-notifications","commit_stats":{"total_commits":359,"total_committers":13,"mean_commits":"27.615384615384617","dds":0.362116991643454,"last_synced_commit":"6056ed9c3b1da7cf62715541938a9bece7fbc1b2"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/se-panfilov%2Fvue-notifications","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/se-panfilov%2Fvue-notifications/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/se-panfilov%2Fvue-notifications/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/se-panfilov%2Fvue-notifications/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/se-panfilov","download_url":"https://codeload.github.com/se-panfilov/vue-notifications/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248606348,"owners_count":21132342,"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":["javascript","message-bus","notifications","toast-message","toast-notifications","vue-notifications","vuejs"],"created_at":"2024-07-31T15:01:53.778Z","updated_at":"2025-04-12T17:36:10.069Z","avatar_url":"https://github.com/se-panfilov.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","实用库","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI组件","Components \u0026 Libraries","UI Components [🔝](#readme)","UI Components"],"sub_categories":["Component Collections","通知","UI Components","Notification"],"readme":"[![Codacy Badge](https://api.codacy.com/project/badge/Grade/0995faa412214bf2bbc114882f9ea1a4)](https://www.codacy.com/app/se-panfilov/vue-notifications?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=se-panfilov/vue-notifications\u0026amp;utm_campaign=Badge_Grade)\n[![](https://api.codeclimate.com/v1/badges/a4d945aeb21c32fc4bdf/maintainability)](https://codeclimate.com/github/se-panfilov/vue-notifications/maintainability)\n[![Build Status](https://travis-ci.org/se-panfilov/vue-notifications.svg?branch=master)](https://travis-ci.org/se-panfilov/vue-notifications)\n[![GitHub license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/se-panfilov/vue-notifications/blob/master/LICENSE)\n[![Known Vulnerabilities](https://snyk.io/test/github/se-panfilov/vue-notifications/badge.svg?targetFile=package.json)](https://snyk.io/test/github/se-panfilov/vue-notifications?targetFile=package.json)\n[![NPM](https://nodei.co/npm/vue-notifications.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/vue-notifications/)\n[![Package Quality](http://npm.packagequality.com/badge/vue-notifications.png)](http://packagequality.com/#?package=vue-notifications)\n\n| [SITE](https://se-panfilov.github.io/vue-notifications/) | [DOCS](https://se-panfilov.github.io/vue-notifications/docs/html/index.html) | [EXAMPLES](https://github.com/se-panfilov/vue-notifications/tree/master/examples) | [GITHUB](https://github.com/se-panfilov/vue-notifications) | [LICENSE](https://github.com/se-panfilov/vue-notifications/blob/master/LICENSE) |\n\n# vue-notifications\n\n**VueNotifications** - agnostic library for non-blocking notifications.\n\n----\n\n## Introduction and WTF is it?\n\n`vue-notifications` is \"Vue.js agnostic non-blocking notifications library\"... and it's a lie \\)\\) Seriously.\n\n`vue-notifications`it's basically **a bridge** between your actual app and UI-notfications libs, like [mini-toastr](https://github.com/se-panfilov/mini-toastr).\n\n### Why do we need this?\n\nBecause we want to have a way to show notifications and a way to easy replace UI library that show them without rewrite the code.\n\n### What `vue-notifications` actually do?\n\nIt's allow you to declare your notifications in blocks like this one:\n\n```js\nexport default {\n    name: 'DemoView',\n    data () {\n      //...\n    },\n    methods: {\n      //...\n    },\n    notifications: {\n      showLoginError: { // You can have any name you want instead of 'showLoginError'\n        title: 'Login Failed',\n        message: 'Failed to authenticate',\n        type: 'error' // You also can use 'VueNotifications.types.error' instead of 'error'\n      }\n    }\n  }\n```\n\nAnd then call it via `this`: `this.showLoginError()`, and also with some override props: `this.showLoginError({message: 'whatever'})`.\n\n### Why do we need third-party UI lib \\(like [mini-toastr](https://github.com/se-panfilov/mini-toastr)\\)?\n\nWell, because we want to be agnostic.\nThat's mean that if at some step you would be fucked up with your UI library, `vue-notifications` will allow you to replace it as much easy as possible. Basically you would be required to replace `vue-notifications`'s config. And that's all.\n\n\n\n## Installation\n\nCheck the Docs: [Installation](https://se-panfilov.github.io/vue-notifications/docs/html/installation.html)\n\n```shell\nnpm i vue-notifications --save\n```\n\nor\n\n```shell\nyarn add vue-notifications\n```\n\ninclude in project:\n\n## Getting started\n\nCheck the Docs: [Getting started](https://se-panfilov.github.io/vue-notifications/docs/html/getting-started.html)\n\n```JS\nimport VueNotifications from 'vue-notifications'\n\nVue.use(VueNotifications, options)\n```\n\n### Setup and configuration \\(necessary\\)\n\nAs I said above - you have to use UI library that would draw actual notifications for you.\n\nFor this example I will use [mini-toastr](https://github.com/se-panfilov/mini-toastr)\n\n##### Step-by-step guide\n\nLet's do everything together\n\n\u003e If you don't want spend too much time with this shit - you can go ahead and copy-past whole code from the bottom of this page\n\nAnyway\n\n* Import `vue-notifications`\n\nHere we're including `vue-notifications` and  `mini-toastr` in our project\n\n```js\nimport VueNotifications from 'vue-notifications'\nimport miniToastr from 'mini-toastr'\n```\n\nP.S. don't forget to install `mini-toastr` \\(`npm i mini-toastr --save`\\)\n\n* Setup types of the messages\n\nThis one is mostly related to `mini-toastr`. We basically want `mini-toastr` to have these 4 types of messages. Basically 'error' should be red and success - 'green'\n\n```js\nconst toastTypes = {\n  success: 'success',\n  error: 'error',\n  info: 'info',\n  warn: 'warn'\n}\n```\n\n* Activate `mini-toastr`\n\nHere we make `mini-toasr` initialization with types from above\n\n```js\nminiToastr.init({types: toastTypes})\n```\n\n* Map `vue-notification` to `mini-toastr`\n\nWe want our messages to be called via `vue-notification`but be shown by `mini-toastr`, So :\n\n```js\nfunction toast ({title, message, type, timeout, cb}) {\n  return miniToastr[type](message, title, timeout, cb)\n}\n\nconst options = {\n  success: toast,\n  error: toast,\n  info: toast,\n  warn: toast\n}\n```\n\nThis stuff will forward our messages, so in case of 'success', it will call `miniToastr.success(message, title, timeout, cb)`, in case of 'error' it will call `miniToastr.error(message, title, timeout, cb)` and etc. Keep in mind that the types\\(like \"success\", \"error\" and etc\\) could be whatever you want. In this example we just use default stuff for both libs.\n\n* Activate the plugin\n\nOkay, now we have to pass our `options` into the plugin. Actually `vue-notification` has auto-install, but we want to pass options from above to it, so that's the case why do we do this manually\n\n```js\nVue.use(VueNotifications, options)\n```\n\n##### All together\n\nYou can just copy-paste code below\n\n```js\nimport VueNotifications from 'vue-notifications'\n\n// Include mini-toaster (or any other UI-notification library)\nimport miniToastr from 'mini-toastr'\n\n// We shall setup types of the messages. ('error' type - red and 'success' - green in mini-toastr)\nconst toastTypes = {\n  success: 'success',\n  error: 'error',\n  info: 'info',\n  warn: 'warn'\n}\n\n// This step requires only for mini-toastr, just an initialization\nminiToastr.init({types: toastTypes})\n\n// Here we are seting up messages output to `mini-toastr`\n// This mean that in case of 'success' message we will call miniToastr.success(message, title, timeout, cb)\n// In case of 'error' we will call miniToastr.error(message, title, timeout, cb)\n// and etc.\nfunction toast ({title, message, type, timeout, cb}) {\n  return miniToastr[type](message, title, timeout, cb)\n}\n\n// Here we map vue-notifications method to function abowe (to mini-toastr)\n// By default vue-notifications can have 4 methods: 'success', 'error', 'info' and 'warn'\n// But you can specify whatever methods you want.\n// If you won't specify some method here, output would be sent to the browser's console\nconst options = {\n  success: toast,\n  error: toast,\n  info: toast,\n  warn: toast\n}\n\n// Activate plugin\n// VueNotifications have auto install but if we want to specify options we've got to do it manually.\nVue.use(VueNotifications, options)\n```\n\n## Usage\n\nCheck the Docs: [Usage](https://se-panfilov.github.io/vue-notifications/docs/html/usage.html)\n\n```js\nexport default {\n    name: 'DemoView',\n    data () {\n      //...\n    },\n    methods: {\n      //...\n    },\n    notifications: {\n      showLoginError: { // You can have any name you want instead of 'showLoginError'\n        title: 'Login Failed',\n        message: 'Failed to authenticate',\n        type: 'error' // You also can use 'VueNotifications.types.error' instead of 'error'\n      }\n    }\n  }\n```\n\nNow you can call `showLoginError` as a common method via this:\n\n```js\nthis.showLoginError()\n```\n\n\u003e **PRO tip**: Technically there is no difference between methods defined in `notifications: {...}` section and in `methods: {...}` section - they are all the same. So that's basically mean that** you shall not define methods with same name in those sections**, because they would overlap each other.\n\nSo, now you can do something like that:\n\n```js\nmethods: {\n  login () {\n    loginUtil.login(err =\u003e if (err) this.showLoginError())\n  }\n}\n```\n\nBut wait. What if I want to show some custom message in example above?\n\nWell, in this case you can override `showLoginError()` method:\n\n```js\nthis.showLoginError({message: err.message})\n```\n\nIn the same way you can override all the others properties\n\n```js\nthis.showLoginError({title: 'my title', message: 'just an error', type: 'warn', timeout: 1000})\n```\n\n### Options to override\n\nAs I said above, you can specify any of following properties\n\n| Name | Type | Default value | Description |\n| :--- | :--- | :--- | :--- |\n| title | String | undefined | Notification's title \\(can be empty\\) |\n| message | String | undefined | Notification's body message. Normally should be set up |\n| timeout | Number | 3000 | time before notifications gone |\n| cb | Function | undefined | Callback function |\n\nBut actually you can add your own properties as well, if you want. Why and how? You can check it in [Advanced Setup](https://se-panfilov.github.io/vue-notifications/docs/html/advanced-setup.html) section.\n\n## Browsers support.\n\nCheck the Docs: [Browsers support](https://se-panfilov.github.io/vue-notifications/docs/html/browsers-support.html)\n\nVersion v1.0.0 and after guarantees only a support of evergreen browsers.\n\nVersions below v1.0.0 supports all `ES5-compatable` browsers \\(i.g. starting from `IE11`\\).\n\n## License\n\nMIT License\n\nCopyright (c) 2016 Sergei Panfilov\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n## Legal Disclaimer\n\nThis project is provided \"as is\", without warranty of any kind. The authors and contributors disclaim all liability for any damages arising from its use, inability to use, or performance. Users are responsible for ensuring compliance with applicable laws and regulations in their jurisdiction, including but not limited to:\n\n- European Union: Cyber Resilience Act (CRA) and Artificial Intelligence Act (AI Act)\n- United States: Uniform Commercial Code (UCC) and Export Administration Regulations (EAR)\n- China: Cybersecurity Law\n- India: Information Technology Act\n\nFor details, see the full [DISCLAIMER.md](DISCLAIMER.md) file.\n\n\n[1]: https://github.com/se-panfilov/mini-toastr\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fse-panfilov%2Fvue-notifications","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fse-panfilov%2Fvue-notifications","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fse-panfilov%2Fvue-notifications/lists"}