Simple Notify Handler For Vue.js

Simple Notify Handler For Vue.js

A simple, pretty, clean notification component for Vue.js app.

Vue Simple Notify

NPM version VueJS v2.x compatible License Codacy Badge Travis Standard codecov  KB Dependency Status

Versión en español

Simple notify handler component for Vue.js.



Demo

GitHub

CodePen

Quick Start

NPM

Install the package:

$ npm install vue-simple-notify

Register the component:

import Vue from 'vue'
import VueSimpleNotify from 'VueSimpleNotify'

Vue.component('VueSimpleNotify', VueSimpleNotify)

Use the component:

<vue-simple-notify :items="[]"></vue-simple-notify>

CDN

Include styles:

<link href="https://unpkg.com/vue-simple-notify/dist/vue-simple-notify.min.css">

Include scripts:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-simple-notify/dist/vue-simple-notify.min.js"></script>

Register the component:

Vue.component('VueSimpleNotify', VueSimpleNotify.VueSimpleNotify)

Use the component:

<vue-simple-notify :items="[]"></vue-simple-notify>

Examples

Examples of use for this component:

- Using CDN:

<!DOCTYPE html>
<html>

  <head>
    <link href="https://unpkg.com/vue-simple-notify/dist/vue-simple-notify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  </head>

  <body>

    <div id="app">
      <vue-simple-notify :items="[]"></vue-simple-notify>
    </div>
    
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-simple-notify/dist/vue-simple-notify.min.js"></script>

    <script>
      Vue.component('VueSimpleNotify', VueSimpleNotify.VueSimpleNotify)
      new Vue().$mount('#app')
    </script>

  </body>

</html>

- Adding items:

<vue-simple-notify
  :items="items"
></vue-simple-notify>
new Vue({
  el: '#app',
  components: { VueSimpleNotify },
  data () {
    return {
      items: [
        {
          message: 'example of error message.'
        },
        {
          type: 'Success',
          color: '#2ecc71',
          dismissable: false,
          message: 'example of success message.'
        }
      ]
    }
  }
})

- Setting the delay between notifications:

<vue-simple-notify
  :items="items"
  :delay="delay"
></vue-simple-notify>
new Vue({
  el: '#app',
  components: { VueSimpleNotify },
  data () {
    return {
      items: [{}, {}, {}],
      delay: 1000
    }
  }
})

- Listening to the @onDismiss event:

<vue-simple-notify
  :items="items"
  @onDismiss="onDismiss"
></vue-simple-notify>
new Vue({
  el: '#app',
  components: { VueSimpleNotify },
  data () {
    return {
      items: [{}]
    }
  },
  methods: {
    onDismiss: function onDismiss (index) {
      console.log(index)
    }
  }
})

- Removing items from the component.

<vue-simple-notify
  :items="items"
  ref="vsn"
></vue-simple-notify>
const vueSimpleNotify = new Vue({
  el: '#app',
  components: { VueSimpleNotify },
  data () {
    return {
      items: [{}, {}, {}]
    }
  }
}).$refs.vsn

vueSimpleNotify.dismiss(1)

- Removing all elements.

<vue-simple-notify
  :items="items"
  ref="vsn"
></vue-simple-notify>
const vueSimpleNotify = new Vue({
  el: '#app',
  components: { VueSimpleNotify },
  data () {
    return {
      items: [{}, {}, {}]
    }
  }
}).$refs.vsn

vueSimpleNotify.clear()

Props

Available props in this component:

:items

Description: Notifications array.

Type: Array

Required: true

Default: null

<vue-simple-notify :items="[]">

:delay

Description: Time interval between notifications when displayed.

Type: Number

Default: 500

<vue-simple-notify :items="[]" :delay="1000">

Events

Available events in this component:

@onDismiss

It is triggered each time a notification is dismissed.

onDismiss: function onDismiss (index) { }
Attribute Type Description
index Number Notification index.
<vue-simple-notify :items="[]" :delay="1000" @onDismiss="onDismiss">

Methods

Available methods in this component:

dismiss

Dismiss a notification by a index.

vueSimpleNotify.dismiss(index)
Attribute Type Description Required
index Number Notification index. true

clear

Clear all notifications.

vueSimpleNotify.clear()

Tests

Clone the repository:

$ git clone https://github.com/Josantonius/vue-simple-notify.git vue-simple-notify

Go to the directory:

$ cd vue-simple-notify

Install dependencies:

$ npm install

Run unit tests:

$ npm run test

Run ESLint to ensure that code style is compatible with Standar JavaScript:

$ npm run lint

Run serve with hot reload:

$ npm run dev

Build distribution with minification:

$ npm run bundle

Build demo for production with minification:

$ npm run build

Run all the above:

$ npm run finish

☑ TODO

  • [ ] Fix error when trying to pass ESlint tests in Travis CI.
  • [ ] Fix error when trying to pass E2E tests in Travis CI.
  • [ ] Add new feature.
  • [ ] Improve tests.
  • [ ] Improve documentation.

Contribute

If you would like to help, please take a look at the list of issues or the To Do checklist.

Pull requests

License

This project is licensed under MIT license. See the LICENSE file for more info.

Copyright

2018 Josantonius, josantonius.com

If you find it useful, let me know :wink:

You can contact me on Twitter or through my email.

Github Repository

Tags: #Vue.js