https://github.com/ctf0/vue-notif
vuejs notification component which you can use either through js or html
https://github.com/ctf0/vue-notif
notifications vuejs vuejs-components
Last synced: about 1 year ago
JSON representation
vuejs notification component which you can use either through js or html
- Host: GitHub
- URL: https://github.com/ctf0/vue-notif
- Owner: ctf0
- License: mit
- Created: 2017-06-14T07:30:25.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T23:06:03.000Z (over 3 years ago)
- Last Synced: 2024-10-24T03:39:27.210Z (over 1 year ago)
- Topics: notifications, vuejs, vuejs-components
- Language: Vue
- Size: 211 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Vue Notif
## Installation
```bash
npm install vue-notif --save
```
## Usage
- register the component "we use ***Bulma*** for styling the notification cards".
```js
import Vue from 'vue'
window.EventHub = require('vuemit')
Vue.component('MyNotification', require('vue-notif').default)
```
- add the component to your page
```html
```
- now call it either
+ from html
```html
```
+ or from js
```js
EventHub.fire('showNotif', {
title: 'title',
body: 'body',
type: 'success',
duration: 1,
icon: false,
onClose(){
// what happen when notification is closed
}
});
```
| prop | required | type | default |
| -------- | -------- | -------- | -------------------------------------------- |
| title | :x: | string | null |
| body | :x: | string | null |
| type | :x: | string | info |
| duration | :x: | number | in seconds / null "card will remain visible" |
| icon | :x: | bool | true |
| onClose | :x: | function | null |
- clicking the card itself will dismiss the notification as well.
### Security
If you discover any security-related issues, please email [ctf0-dev@protonmail.com](mailto:ctf0-dev@protonmail.com).