vue-notify-me

Stackable notification Alert for Vue

Showing:

Popularity

Downloads/wk

5

GitHub Stars

139

Maintenance

Last Commit

4yrs ago

Contributors

3

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

vue-notify-me

Notification Alert for Vue.

Features

  • Customizable template
  • Stackable notifications

Live Demo

Installation

npm install vue-notify-me --save

Properties

PropertiesTypeValues
event-busObjectCentral event Bus
event-show (not required)StringDefault notify-me
event-hide (not required)StringDefault hide-notify-me
close (not required)StringDefault bulma, options: bootstrap or any other class for the closing icon
permanent (not required)BoolDefault false
container (not required)StringDefault notification, (Class for the notification container)
status (not required)StringDefault is-success, (Class for the notification status)
width (not required)StringDefault 350px. It's mandatory to set the unit for the width. For example: rem, em, px
timeout (not required)NumberDefault 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.

<template>
  <notify-me
        :event-bus="bus">
      <template slot="content" scope="{data}">
          <div style="width: 100%; word-break: break-all; text-align: left">
              <h4><b>{{data.title}}</b></h4>
              <p style="margin: 0">{{data.text}}</p>
          </div>
      </template>
  </notify-me>
</template>

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:

<notify-me
    container="notification"
    status="alert-success"
    :width="300"
    close="bulma"
    :event-bus="bus"
>
      <template slot="content" scope="{data}">
          <div style="width: 100%; word-break: break-all; text-align: left">
              <h4><b>{{data.title}}</b></h4>
              <p style="margin: 0">{{data.text}}</p>
          </div>
      </template>
  </notify-me>

To show a notification just fire an event like this:

<script>
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'
        }
  
      });
  }
  
}
</script>

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

this.bus.$emit('notify-me', {
    permanent: true,
    status: this.status,
    data: {
        title: 'The pygmy team :)',
        text: this.text
    }

});

Enjoy :)

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial