{"id":15024815,"url":"https://github.com/voerro/vue-notifications","last_synced_at":"2025-04-23T21:51:31.474Z","repository":{"id":57186295,"uuid":"118468093","full_name":"voerro/vue-notifications","owner":"voerro","description":"Easily display notifications to your users.","archived":false,"fork":false,"pushed_at":"2018-03-08T04:23:39.000Z","size":379,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-24T13:56:21.128Z","etag":null,"topics":["component","notifications","notifications-plugin","vue","vue-notifications","vuejs2"],"latest_commit_sha":null,"homepage":"https://voerro.github.io/vue-notifications/","language":"HTML","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/voerro.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}},"created_at":"2018-01-22T14:28:50.000Z","updated_at":"2020-07-28T12:45:38.000Z","dependencies_parsed_at":"2022-09-14T16:50:27.733Z","dependency_job_id":null,"html_url":"https://github.com/voerro/vue-notifications","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voerro%2Fvue-notifications","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voerro%2Fvue-notifications/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voerro%2Fvue-notifications/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voerro%2Fvue-notifications/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/voerro","download_url":"https://codeload.github.com/voerro/vue-notifications/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250522293,"owners_count":21444510,"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":["component","notifications","notifications-plugin","vue","vue-notifications","vuejs2"],"created_at":"2024-09-24T20:01:00.630Z","updated_at":"2025-04-23T21:51:31.454Z","avatar_url":"https://github.com/voerro.png","language":"HTML","funding_links":[],"categories":["UI Components [🔝](#readme)","Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"# @voerro/vue-notifications\n\n[![npm (scoped)](https://img.shields.io/npm/v/@voerro/vue-notifications.svg?style=flat-square)](https://www.npmjs.com/package/@voerro/vue-notifications)\n[![npm](https://img.shields.io/npm/dm/@voerro/vue-notifications.svg?style=flat-square)](https://www.npmjs.com/package/@voerro/vue-notifications)\n[![MIT](https://img.shields.io/github/license/AlexMordred/vue-notifications.svg?style=flat-square)](https://opensource.org/licenses/MIT)\n\nEasily display notifications to your users.\n\n[Live Demo](https://voerro.github.io/vue-notifications/)\n\n## Installation\n\nInstall via npm:\n\n```bash\nnpm install @voerro/vue-notifications --save-dev\n```\n\nRegister component:\n\n```javascript\nimport Notifications from '@voerro/vue-notifications'\n\nVue.component('notifications', Notifications);\n```\n\n## Basic Usage\n\nPut this anywhere within the HTML of your Vue app:\n\n```html\n\u003cnotifications\u003e\u003c/notifications\u003e\n```\n\nIf you want to show a notification on page load:\n\n```html\n\u003cnotifications\n    first-notification=\"A notification on page load\"\u003e\u003c/notifications\u003e\n```\n\nTo show a notification from JavaScript:\n\n```javascript\nnotify('Data has been successfully saved!');\n```\n\nYou're not limited to plain text - HTML is supported.\n\n## Component Properties\n\nThere is a number of properties you can pass to the component in a similar manner we passed the \"first-notification\" in the example above.\n\nProperty | Default Value | Possible Values | Description\n--- | --- | --- | --- |\nposition | 'bottom-right' | 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right' | Position of the notifications on the page.\nhide-after | 5000 | 'never', integer number | Number of milliseconds before a notification disappears. 'never' - notifications won't disappear automatically, users will have to close them manually.\ntheme | 'light-blue' | 'black', 'white', 'blue-grey', 'grey', 'brown', 'deep-orange', 'orange', 'amber', 'yellow', 'lime', 'light-green', 'green', 'teal', 'cyan', 'light-blue', 'blue', 'indigo', 'deep-purple', 'purple', 'pink', 'red' | Color theme for the notifications. Uses Material colors.\nsingle | undefined | 'true' | Set to 'true' to only show one notification at a time (the last one)\nsound | undefined | 'path-to-a-sound-file' | A path to a sound file which will be played every time a new notification is shown.\nfirst-notification | undefined | string | A text of a notification which will be shown on page load.\nfirst-theme | undefined | string | A theme of a notification which will be shown on page load.\n\n## JavaScript Options\n\nInstead of just passing a string to the `notify()` method you can also pass an object with options. This way you can customize each individual notification. For example:\n\n```javascript\nnotify({\n    text: 'Could not save the data!',\n    theme: 'red'\n});\n```\n\nAvailable options:\n- text\n- theme\n- hideAfter\n\n## Styling\n\nYou can easily create your own color themes for the notifications. Pass the name of the custom theme with the properties, for example `theme=\"ocean-blue\"`. Then write CSS for the class `.voerro-notification-theme-ocean-blue`.\n\n```css\n.voerro-notification-theme-ocean-blue {\n    background: #2962FF;\n    color: #fff;\n}\n```\n\nAlso, each notification has `.voerro-notification` class, in case you want to change the style further. This is the default styling:\n\n```css\n.voerro-notification {\n    margin: .5rem 0;\n    padding: 1rem;\n\n    border-radius: .3rem;\n    box-shadow: 0 0 1rem 0rem rgb(0, 0, 0, 0.5);\n    filter: opacity(90%);\n}\n```\n\n## License\n\nThis is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvoerro%2Fvue-notifications","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvoerro%2Fvue-notifications","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvoerro%2Fvue-notifications/lists"}