Notification library for Vue.js

Vue.js notifications

Vue.js notifications is a small library to add notifications with CSS & Velocity animations.

Take a look at the Live Demo.

The example below is making use of different kinds of notifications separated in groups.

Example

To start working with Vue.js Notification, use the following command to install it.

npm install --save vue-notification

OR

yarn add vue-notification

If used as a global component

import Vue from 'vue'
import Notifications from 'vue-notification'

Vue.use(Notifications)

In *.vue

<notifications group="foo" />

In any of your files:

this.$notify({
  group: 'foo',
  title: 'Important message',
  text: 'Hello user! This is a notification!'
});

The above example has a single notification. If you would like to use more, you can create groups for different uses.

<notifications group="foo" position="top center" max="3"/>
<notifications group="app" position="bottom right" width="400"/>

<button @click="notify">What's this?</button>
<button @click="clear">Clear</button>
<button @click="notificate">Ask permission to go out</button>

Two different groups with different positions and props.

Props

  • group: Name of the notification holder, if specified
  • width: Width of notification holder, can be %, px string or number. Valid values: '100%', '200px', 200
  • position: Part of the screen where notifications will pop out
  • max: Maximum number of notifications that can be shown in notification holder and more available here.

API

  this.$notify({
    // (optional)
    // Name of the notification holder
    group: 'foo',

    // (optional)
    // Class that will be assigned to the notification
    type: 'warning',

    // (optional)
    // Title (will be wrapped in div.notification-title)
    title: 'This is title',

    // Content (will be wrapped in div.notification-content)
    text: 'This is <b> content </b>',

    // (optional)
    // Overrides default/provided duration
    duration: 10000,

    // (optional)
    // Overrides default/provided animation speed
    speed: 1000
  })

Title and Text can be HTML strings. Also you can use simplified version:

this.$notify('text')

To activate the groups you can set up different methods with different types, texts, durations & speeds, like for system messages and actions for example.

<script>
export default {

methods: {
    clear () {
            // remove all notifications
      this.$notify({
        group: 'foo',
        clean: true
      })
    },
    notify () {
      this.$notify({
        group: 'foo',
        title: '<h4>Nothing!</h4>',
        text: 'Don`t eat it!',
        type: 'warning',
        duration: -10
      })
    },
    notificate () {
      this.$notify({
        group: 'app',
        text: '<p><b>How about No?</b></p>',
        type: 'error',
        speed: 3000
      })
    },
}
}
</script>

The plugin can use the Velocity library to make js-powered animations. To start using it you will have to manually install velocity-animate & supply the library to vue-notification plugin.

If you are interested in more or you have any bugs and suggestions, click [here](https://github.com/euvl/vue-notification. That's it!