Vue Notif

Installation

npm install vue-notif --save

Usage

• register the component "we use Bulma for styling the notification cards".

  import Vue from 'vue'
  window.EventHub = require('vuemit')
  
  Vue.component('MyNotification', require('vue-notif').default)

• add the component to your page

  <div class="notif-container">
      <my-notification></my-notification>
  </div>

• now call it either

  • from html

    <div class="notif-container">
        <my-notification
            title="title"
            body="body"
            type="success/error/primary/warning"
            :icon="false"
            :duration="1/2/etc.."
            :on-close="somefunction()">
        </my-notification>
    </div>

  • or from js

    EventHub.fire('showNotif', {
        title: 'title',
        body: 'body',
        type: 'success',
        duration: 1,
        icon: false,
        onClose(){
            // what happen when notification is closed
        }
    });

  prop	required	type	default
  title	❌	string	null
  body	❌	string	null
  type	❌	string	info
  duration	❌	number	in seconds / null "card will remain visible"
  icon	❌	bool	true
  onClose	❌	function	null

• clicking the card itself will dismiss the notification as well.

Security

If you discover any security-related issues, please email ctf0-dev@protonmail.com.