Skip to content
Minimalist 1kb Notification component
Branch: master
Clone or download
Latest commit fc84658 Apr 30, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Changed package version Feb 18, 2018
src
themes Build Sep 17, 2017
.editorconfig Added editorconfig Jan 8, 2018
.gitignore Added package and yarn lock on gitignore Feb 18, 2018
LICENSE
README.md Changed package version Feb 18, 2018
package.json 0.4.3 Apr 30, 2018
yarn.lock Add yarn.lock Jan 16, 2018

README.md

vue-notifyjs

Minimalist notification component for Vue 2.x

Why use it?

  • Small: 1.5kb (minified & gzipped), 4kb (minified)
  • Simple this.$notify({message:'My message'})
  • Has multiple themes
  • The animations can be customized through Vue transitions
  • Can be used both through npm and as a script tag

Demos:

3 themes supported

Default theme

Material design theme

Now-ui theme

Install

yarn add vue-notifyjs

CDN JS:

CDN CSS:

Usage

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

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

export default {
   methods: {
    addNotification() {
      this.$notify({
        message: 'Welcome',
        type: 'success'
      })
    }
  }
}
</script>
<!-- import styles -->
<style src="vue-notifyjs/themes/default.css"></style>

Note: <notifications></notifications> can be declared only once anywhere in your app, preferably in your root component so the notification component is alive inside any other components.

Notification options

You can set notification options in 3 ways

  1. Upon plugin initialization
import Notify from 'vue-notifyjs'
Vue.use(Notify, {type: 'primary', timeout: 2000})
  1. Dynamically via setOptions method
this.$notifications.setOptions({
  type: 'primary', 
  timeout: 2000,
  horizontalAlign: 'right',
  verticalAlign: 'top'
})
  1. When using $notify
this.$notify({
  message: 'Welcome',
  type: 'success'
})

Note: Options sent through this.$notify will override default options and will have higher priority than default options.

Props

Notifications

transitionName: {
 type:String,
 default:'list'
},
transitionMode: {
 type:String,
 default:'in-out'
},
overlap: {
 type: Boolean,
 default: false
}

Notification (passed through the object sent to $notify method)

props: {
  message: String,
  title: 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 | primary
  },
  timeout: {
    type: Number,
    default: 5000
  },
  timestamp: {
    type: Date,
    default: () => new Date()
  },
  component: {  //is rendered instead of notification message
    type: [Object, Function]
  },
  showClose: {
      type: Boolean,
      default: true
  },
  closeOnClick: {
      type: Boolean,
      default: true
  },
  clickHandler: Function,
},

Methods

clear() - Clears all current notifications

this.$notifications.clear();

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D
You can’t perform that action at this time.