Using a 3kb notification component for Vue.js

vue-notifyjs

Benefit from the small size (3kb) of this notification component for Vue, and customize it nice and easy using the available props. You can create many notifications with different positions for each, according to your needs.

Currently there are some demos available & 3 supported themes.

• jsFiddle demo
• Overlaping notifications
• Custom html content via components

Example

Install it in your Vue.js projects via yarn:

yarn add vue-notifyjs

Importing it in your main js file or in a specific component works in a similar way

import Notify from 'vue-notifyjs'
Vue.use(Notify)

export default {
   methods: {
    addNotification(verticalAlign = 'top', horizontalAlign = 'right') {
      this.$notify({
        message: 'Welcome',
        horizontalAlign: horizontalAlign,
        verticalAlign: verticalAlign,
                // change types accordingly
        type: "info"
      })
    }
  }
}
</script>

<!-- import styles -->
<style src="vue-notifyjs/themes/default.css"></style>

In your templates you just need to add the following component:

<template>
  <notifications></notifications>
</template>

You can use some props to modify your notifications, passed through the object sent to the$notify method.

props: {
    message: String,
    icon: String,
    verticalAlign: {
      type: String,
      default: 'top' // top | bottom
    },
    horizontalAlign: {
      type: String,
      default: 'center' // right | center | left
    },
    type: {
      type: String,
      default: 'info' // info | warning | danger | success
    },
    timeout: {
      type: Number,
      default: 5000
    },
    component: {  //is rendered instead of notification message
      type: [Object, Function]
    }
  },

Well, there it is, find more on how to use it on GitHub.