@mathieustan/vue-notification

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

or

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

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.

1. 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',
  },
});

2. 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',
        },
      });
    },
  },
  //...
};