Using a 3kb notification component for Vue.js


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.


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'

export default {
   methods: {
    addNotification(verticalAlign = 'top', horizontalAlign = 'right') {
        message: 'Welcome',
        horizontalAlign: horizontalAlign,
        verticalAlign: verticalAlign,
                // change types accordingly
        type: "info"

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

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


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.