{"id":13938070,"url":"https://github.com/PygmySlowLoris/vue-notify-me","last_synced_at":"2025-07-20T00:31:50.401Z","repository":{"id":72021096,"uuid":"95792919","full_name":"PygmySlowLoris/vue-notify-me","owner":"PygmySlowLoris","description":"Stackable notification Alert for Vue","archived":false,"fork":false,"pushed_at":"2019-01-03T18:24:40.000Z","size":639,"stargazers_count":139,"open_issues_count":7,"forks_count":18,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-06-28T17:45:24.570Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/PygmySlowLoris.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-06-29T15:39:51.000Z","updated_at":"2024-02-26T14:12:20.000Z","dependencies_parsed_at":"2024-01-02T23:28:29.273Z","dependency_job_id":"5641f0a5-ba71-4c0f-88b0-dd083a9145bf","html_url":"https://github.com/PygmySlowLoris/vue-notify-me","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/PygmySlowLoris/vue-notify-me","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PygmySlowLoris%2Fvue-notify-me","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PygmySlowLoris%2Fvue-notify-me/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PygmySlowLoris%2Fvue-notify-me/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PygmySlowLoris%2Fvue-notify-me/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PygmySlowLoris","download_url":"https://codeload.github.com/PygmySlowLoris/vue-notify-me/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PygmySlowLoris%2Fvue-notify-me/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266048536,"owners_count":23868739,"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-07T23:04:12.960Z","updated_at":"2025-07-20T00:31:45.382Z","avatar_url":"https://github.com/PygmySlowLoris.png","language":"Vue","funding_links":[],"categories":["Vue","UI组件","Components \u0026 Libraries","UI Components [🔝](#readme)","UI Components"],"sub_categories":["通知","UI Components","Notification"],"readme":"#   vue-notify-me\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://media.giphy.com/media/GoTlxRAapcEVy/giphy.gif\" /\u003e\n\u003c/p\u003e\n\nNotification Alert for Vue.\n\n## Features\n\n* Customizable template\n* Stackable notifications\n\n\u003ca href=\"https://pygmyslowloris.github.io/vue-notify-me/\"\u003e Live Demo\u003c/a\u003e\n\n##  Installation\n\n```bash\nnpm install vue-notify-me --save\n```\n\n##  Properties\n\n| Properties                    | Type      | Values     |\n| :---------------              | :-------  | :--------- |\n|  `event-bus`                  | Object    | \u003cb\u003eCentral event Bus \u003c/b\u003e|\n|  `event-show` (not required)  | String    | \u003cb\u003eDefault \u003c/b\u003e `notify-me`|\n|  `event-hide` (not required)  | String    | \u003cb\u003eDefault \u003c/b\u003e `hide-notify-me`|\n|  `close` (not required)       | String    | \u003cb\u003eDefault \u003c/b\u003e`bulma`, options: bootstrap or any other class for the closing icon|\n|  `permanent` (not required)   | Bool      | \u003cb\u003eDefault \u003c/b\u003efalse|\n|  `container` (not required)   | String    | \u003cb\u003eDefault \u003c/b\u003e`notification`, (Class for the notification container)|\n|  `status` (not required)      | String    | \u003cb\u003eDefault \u003c/b\u003e`is-success`, (Class for the notification status)|\n|  `width` (not required)       | String    | \u003cb\u003eDefault \u003c/b\u003e`350px`. It's **mandatory** to set the **unit** for the width. For example: `rem`, `em`, `px`    |\n|  `timeout` (not required)       | Number    | \u003cb\u003eDefault `4000`\u003c/b\u003e. Value is in miliseconds. If notification is not `permanent` you can set the timeout for it    |\n\n##  Examples\n\nInclude the component in your .vue file.\n\n```html\n\u003ctemplate\u003e\n  \u003cnotify-me\n        :event-bus=\"bus\"\u003e\n      \u003ctemplate slot=\"content\" scope=\"{data}\"\u003e\n          \u003cdiv style=\"width: 100%; word-break: break-all; text-align: left\"\u003e\n              \u003ch4\u003e\u003cb\u003e{{data.title}}\u003c/b\u003e\u003c/h4\u003e\n              \u003cp style=\"margin: 0\"\u003e{{data.text}}\u003c/p\u003e\n          \u003c/div\u003e\n      \u003c/template\u003e\n  \u003c/notify-me\u003e\n\u003c/template\u003e\n```\n\nIf you'd like to use the component in a SPA set a single template on your layout application\nand fire your notification through your central event bus.\nSet any available prop for the component like this:\n\n```html\n\u003cnotify-me\n    container=\"notification\"\n    status=\"alert-success\"\n    :width=\"300\"\n    close=\"bulma\"\n    :event-bus=\"bus\"\n\u003e\n      \u003ctemplate slot=\"content\" scope=\"{data}\"\u003e\n          \u003cdiv style=\"width: 100%; word-break: break-all; text-align: left\"\u003e\n              \u003ch4\u003e\u003cb\u003e{{data.title}}\u003c/b\u003e\u003c/h4\u003e\n              \u003cp style=\"margin: 0\"\u003e{{data.text}}\u003c/p\u003e\n          \u003c/div\u003e\n      \u003c/template\u003e\n  \u003c/notify-me\u003e\n```\n\nTo show a notification just fire an event like this:\n \n```js\n\u003cscript\u003e\nimport Notify from 'vue-notify-me'\n\nconst bus = new Vue();\n\nexport default {\n  components: {\n    'notify-me': Notify\n  },\n  data(){\n      return {\n          bus\n      }\n  },\n  mounted(){\n      this.bus.$emit('notify-me', {\n        data: {\n            title: 'The pygmy team :)',\n            text: 'this is my notification'\n        }\n  \n      });\n  }\n  \n}\n\u003c/script\u003e\n```\n\nYou may also add any available prop through the event emitter:\n\n```js\nthis.bus.$emit('notify-me', {\n    permanent: true,\n    status: this.status,\n    data: {\n        title: 'The pygmy team :)',\n        text: this.text\n    }\n\n});\n```\n\nEnjoy :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPygmySlowLoris%2Fvue-notify-me","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPygmySlowLoris%2Fvue-notify-me","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPygmySlowLoris%2Fvue-notify-me/lists"}