Awesome

vue-notification

A Notification (snackbar) Vue component. Compatible with Vue 2.x

Demo
Install
Usage
Props
Theme

Demo

To view a demo online: https://vue-notification.netlify.com/

Install

npm install @mathieustan/vue-notification --save

yarn add @mathieustan/vue-notification

import VueNotification from '@mathieustan/vue-notification';
Vue.use(VueNotification);

// Or with options (like breakpoints)
Vue.use(VueNotification, {
  breakpoints: {
    0: {
      bottom: true,
    },
    480: {
      top: true,
      right: true,
    },
  },
});

Usage

<script>
export default {
  // ...
  methods: {
    showNotification () {
      this.$notify('Hello, I am a notification');
    },
  },
  //...
};

Available props

Prop	Type	Default	Description
message	String	''	Message to show on notification
type	String		Show notification with specific type (info, success, warning, error, offline)
top	Boolean	false	Allow to position notification 'top'
bottom	Boolean	true	Allow to position notification 'bottom'
left	Boolean	false	Allow to position notification 'left'
right	Boolean	false	Allow to position notification 'right'
offset	Number	0	Add extra offset to notification (from top)
closeDelay	Number	4500	Delay before closing notification (in ms)
multiLine	Boolean	false	Makes the notification higher (mobile) (extra padding)
actionText	String	''	Will add a button with this text after message
onActionClick	Function		Action when button will be clicked
showClose	Boolean	false	Will add a close button
hideIcon	Boolean	false	Allow to hide icon for types (success,info,...)
fullWidth	Boolean	false	Force notification to full width
theme	Object	false	Update default theme (More informations here Theme)

Theme

:rocket: It's now possible to surcharge default theme colors & box-shadow. Theme object looks like this :point_down:

{
  colors: {
    success: '#4f88ff',
    successDarken: '#2d71fe',
    info: '#5d6a89',
    infoDarken: '#535f7b',
    warning: '#f8a623',
    warningDarken: '#f69a07',
    error: '#ff4577',
    errorDarken: '#ff245f',
    offline: '#ff4577',
    offlineDarken: '#ff245f',
  },
  boxShadow: `0px 3px 5px -1px rgba(0,0,0,0.2),
    0px 6px 10px 0px rgba(0,0,0,0.14),
    0px 1px 18px 0px rgba(0,0,0,0.12)`,
}

Examples : There are two ways to update theme.

Options when init VueNotification

import VueNotification from '@mathieustan/vue-notification';
Vue.use(VueNotification, {
  theme: {
    // darken colors are used for background on icon
    colors: {
      success: '#54d861',
      darkenSuccess: '#2d8e36',
      info: '#5d6a89',
      darkenInfo: '#535f7b',
      warning: '#f8a623',
      darkenWarning: '#f69a07',
      error: '#ff4577',
      darkenError: '#ff245f',
      offline: '#ff4577',
      darkenOffline: '#ff245f',
    },
    boxShadow: '10px 5px 5px red',
  },
});

Theme properties when calling $notify

<script>
export default {
  // ...
  methods: {
    showNotification () {
      this.$notify({
        message: 'Hello Wolrd',
        theme: {
          colors: {
            success: '#54d861',
            darkenSuccess: '#2d8e36',
            info: '#5d6a89',
            darkenInfo: '#535f7b',
            warning: '#f8a623',
            darkenWarning: '#f69a07',
            error: '#ff4577',
            darkenError: '#ff245f',
            offline: '#ff4577',
            darkenOffline: '#ff245f',
          },
          boxShadow: '10px 5px 5px red',
        },
      });
    },
  },
  //...
};