{"id":15764461,"url":"https://github.com/ctf0/vue-notif","last_synced_at":"2025-04-21T04:31:45.929Z","repository":{"id":72021095,"uuid":"94302576","full_name":"ctf0/vue-notif","owner":"ctf0","description":"vuejs notification component which you can use either through js or html","archived":false,"fork":false,"pushed_at":"2023-01-03T23:06:03.000Z","size":216,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-24T03:39:27.210Z","etag":null,"topics":["notifications","vuejs","vuejs-components"],"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/ctf0.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},"funding":{"github":"ctf0"}},"created_at":"2017-06-14T07:30:25.000Z","updated_at":"2023-01-03T23:06:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"ed81f20c-9009-47af-baa0-b26f15fe44de","html_url":"https://github.com/ctf0/vue-notif","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctf0%2Fvue-notif","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctf0%2Fvue-notif/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctf0%2Fvue-notif/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctf0%2Fvue-notif/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ctf0","download_url":"https://codeload.github.com/ctf0/vue-notif/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223849432,"owners_count":17213640,"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":["notifications","vuejs","vuejs-components"],"created_at":"2024-10-04T12:03:45.426Z","updated_at":"2024-11-09T16:03:31.098Z","avatar_url":"https://github.com/ctf0.png","language":"Vue","funding_links":["https://github.com/sponsors/ctf0"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\" style=\"border: none\"\u003e\n    Vue Notif\n    \u003cbr\u003e\n    \u003ca href=\"https://www.npmjs.com/package/vue-notif\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-notif.svg?style=for-the-badge\" alt=\"npm\" /\u003e\u003c/a\u003e \u003ca href=\"https://www.npmjs.com/package/vue-notif\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/vue-notif.svg?style=for-the-badge\" alt=\"npm\" /\u003e\u003c/a\u003e\n\u003c/h1\u003e\n\n## Installation\n\n```bash\nnpm install vue-notif --save\n```\n\n\u003cbr\u003e\n\n## Usage\n\n- register the component \"we use ***Bulma*** for styling the notification cards\".\n\n    ```js\n    import Vue from 'vue'\n    window.EventHub = require('vuemit')\n\n    Vue.component('MyNotification', require('vue-notif').default)\n    ```\n\n- add the component to your page\n\n    ```html\n    \u003cdiv class=\"notif-container\"\u003e\n        \u003cmy-notification\u003e\u003c/my-notification\u003e\n    \u003c/div\u003e\n    ```\n\n- now call it either\n\n    + from html\n\n        ```html\n        \u003cdiv class=\"notif-container\"\u003e\n            \u003cmy-notification\n                title=\"title\"\n                body=\"body\"\n                type=\"success/error/primary/warning\"\n                :icon=\"false\"\n                :duration=\"1/2/etc..\"\n                :on-close=\"somefunction()\"\u003e\n            \u003c/my-notification\u003e\n        \u003c/div\u003e\n        ```\n\n    + or from js\n\n        ```js\n        EventHub.fire('showNotif', {\n            title: 'title',\n            body: 'body',\n            type: 'success',\n            duration: 1,\n            icon: false,\n            onClose(){\n                // what happen when notification is closed\n            }\n        });\n        ```\n\n    | prop     | required | type     | default                                      |\n    | -------- | -------- | -------- | -------------------------------------------- |\n    | title    | :x:      | string   | null                                         |\n    | body     | :x:      | string   | null                                         |\n    | type     | :x:      | string   | info                                         |\n    | duration | :x:      | number   | in seconds / null \"card will remain visible\" |\n    | icon     | :x:      | bool     | true                                         |\n    | onClose  | :x:      | function | null                                         |\n\n- clicking the card itself will dismiss the notification as well.\n\n\u003cbr\u003e\n\n### Security\n\nIf you discover any security-related issues, please email [ctf0-dev@protonmail.com](mailto:ctf0-dev@protonmail.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctf0%2Fvue-notif","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fctf0%2Fvue-notif","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctf0%2Fvue-notif/lists"}