vue-notification

About

Notifications for Vue.js, made with love, with nice transition and clean design.

Install

1. Install component with npm

npm install @mathieustan/vue-notification --save

2. Load component in your project

import VueNotification from '@mathieustan/vue-notification';

Vue.use(VueNotification);

3. Use in a component

export default  {
  methods : {
    notify (message) {
      this.$notify(message);
    },
  },
}

Load component with Options

Options

Theme & breakpoint options when init VueNotification

Vue.use(VueNotification, {
  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',
  },
  breakpoints: {
    0: {
      bottom: true,
    },
    480: {
      top: true,
      right: true,
    },
  },
});

<script>
  ...
  methods: {
    showNotification () {
      this.$notify(this.message);
    },
  }
  ...
</script>

Examples (props)

Default

Default use of notification

<script>
  ...
  methods: {
    showNotification () {
      this.$notify({
        message: "Hello, I am a notification"
        type: ""
        top: true
        bottom: false
        left: true
        right: false
        showClose: false
        closeDelay: 4500
      });
    },
  }
  ...
</script>

Types

Show notification with specific type (info, success, warning, error)

<script>
  ...
  methods: {
    showNotification () {
      this.$notify.success("Hello, I am a notification");
      // OR
      this.$notify.info("Hello, I am a notification");
      // OR
      this.$notify.warning("Hello, I am a notification");
      // OR
      this.$notify.error("Hello, I am a notification");
      // OR
    },
  }
  ...
</script>

Hide Icon

Allow to hide icon from types (success/info/warning/error)

<script>
  ...
  methods: {
    showNotification () {
      this.$notify({
        type: "success"
        message: "Hello, I am a notification"
        hideIcon: true,
      });
    },
  }
  ...
</script>

MultiLine

Makes the notification higher (mobile) (extra padding)

<script>
  ...
  methods: {
    showNotification () {
      this.$notify({
        message: "Hello, I am a notification"
        multiLine: true,
      });
    },
  }
  ...
</script>

Offset

Add a vertical offset to notification placement

<script>
  ...
  methods: {
    showNotification () {
      this.$notify({
        message: "Hello, I am a notification"
        offset: 100,
      });
    },
  }
  ...
</script>

actionText & onActionClick

Allow to have a button with an action into notification

<script>
  ...
  methods: {
    showNotification () {
      this.$notify({
        message: "Hello, I am a notification"
        actionText: Test
        onActionClick: () => ({}),
      });
    },
  }
  ...
</script>

showClose

Show a button to hide notification

<script>
  ...
  methods: {
    showNotification () {
      this.$notify({
        message: "Hello, I am a notification"
        showClose: true,
      });
    },
  }
  ...
</script>

fullWidth

Force to show a full width notification

<script>
  ...
  methods: {
    showNotification () {
      this.$notify({
        message: "Hello, I am a notification"
        fullWidth: true,
      });
    },
  }
  ...
</script>

Vue Notification