Simple Notify Handler For Vue.js

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

Vue Simple Notify

Versión en español

Simple notify handler component for Vue.js.

Demo
Quick Start
Examples
Props
Events
Methods
Tests
TODO
Contribute
License
Copyright

Demo

GitHub

CodePen

Quick Start

NPM

Install the package:

$ npm install vue-simple-notify

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>

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

Fork and clone.
Make changes and run the tests.
Create a branch, commit, push and send me a pull request.

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: #VueJs