https://github.com/PygmySlowLoris/vue-notify-me

Stackable notification Alert for Vue
https://github.com/PygmySlowLoris/vue-notify-me

Last synced: about 1 month ago
JSON representation

Stackable notification Alert for Vue

• Host: GitHub
• URL: https://github.com/PygmySlowLoris/vue-notify-me
• Owner: PygmySlowLoris
• License: mit
• Created: 2017-06-29T15:39:51.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-01-03T18:24:40.000Z (over 5 years ago)
• Last Synced: 2024-07-29T10:43:25.044Z (about 2 months ago)
• Language: Vue
• Size: 624 KB
• Stars: 139
• Watchers: 7
• Forks: 18
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
#   vue-notify-me







Notification Alert for Vue.

## Features

* Customizable template

* Stackable notifications

 Live Demo

##  Installation

```bash

npm install vue-notify-me --save

```

##  Properties

| Properties                    | Type      | Values     |

| :---------------              | :-------  | :--------- |

|  `event-bus`                  | Object    | Central event Bus |

|  `event-show` (not required)  | String    | Default  `notify-me`|

|  `event-hide` (not required)  | String    | Default  `hide-notify-me`|

|  `close` (not required)       | String    | Default `bulma`, options: bootstrap or any other class for the closing icon|

|  `permanent` (not required)   | Bool      | Default false|

|  `container` (not required)   | String    | Default `notification`, (Class for the notification container)|

|  `status` (not required)      | String    | Default `is-success`, (Class for the notification status)|

|  `width` (not required)       | String    | Default `350px`. It's **mandatory** to set the **unit** for the width. For example: `rem`, `em`, `px`    |

|  `timeout` (not required)       | Number    | Default `4000`. Value is in miliseconds. If notification is not `permanent` you can set the timeout for it    |

##  Examples

Include the component in your .vue file.

```html

  

      

          


              
{{data.title}}

              
{{data.text}}

          

      

  


```

If you'd like to use the component in a SPA set a single template on your layout application

and fire your notification through your central event bus.

Set any available prop for the component like this:

```html

      

          


              
{{data.title}}

              
{{data.text}}

          

      

  

```


To show a notification just fire an event like this:

 

```js

import Notify from 'vue-notify-me'

const bus = new Vue();

export default {

  components: {

    'notify-me': Notify

  },

  data(){

      return {

          bus

      }

  },

  mounted(){

      this.bus.$emit('notify-me', {

        data: {

            title: 'The pygmy team :)',

            text: 'this is my notification'

        }

  

      });

  }

  

}

```

You may also add any available prop through the event emitter:

```js

this.bus.$emit('notify-me', {

    permanent: true,

    status: this.status,

    data: {

        title: 'The pygmy team :)',

        text: this.text

    }

});

```

Enjoy :)