Minimal Growl-style Notification Component – vue-notice

Install & Download:

# NPM
$ npm install crip-vue-notice --save

Description:

This is a small and customizable growl-style notification plugin for Vue.js app.

Usage:

Import and install the notification plugin.

import Vue from 'vue'
import CripNotice from 'crip-vue-notice'
Vue.use(CripNotice)

Create notifications.

<template>
  <button class="btn btn-default" @click="notice('open')">Normal</button>
  <button class="btn btn-default" @click="notice('error')">Error</button>
  <button class="btn btn-default" @click="notice('info')">Info</button>
  <button class="btn btn-default" @click="notice('success')">Success</button>
  <button class="btn btn-default" @click="notice('warning')">Warning</button>
</template>
<script>
export default {
  methods: {
    notice (type) {
      this.$notice[type]({
        title: `Notice of ${type} type`,
        description: `Notice of ${type} type was clicked and it popped up!`
      })
    },
  },
}
</script>

Default props.

{
  type: {
    type: String,
    required: true,
    validator: value => types.indexOf(value) > -1,
  },
  title: { type: String, required: true },
  name: { type: String, required: true },
  description: { type: String },
  icons: {
    type: Object,
    default: () => ({
      info: "fa fa-info-circle",
      success: "fa fa-check-circle",
      warning: "fa fa-exclamation-circle",
      error: "fa fa-times-circle",
      close: "fa fa-times",
    }),
  },
  duration: { type: Number, default: () => 1.5 },
  styles: { type: Object, default: () => ({}) },
  closable: { type: Boolean, default: () => false },
  className: { type: String },
  onClose: { type: Function },
},

Preview: