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: 11 days 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 (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T23:06:03.000Z (almost 2 years ago)
• Last Synced: 2024-10-24T03:39:27.210Z (27 days 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 [[email protected]](mailto:[email protected]).