@shapla/vue-notification v1.0.0

Shapla Notification

A simple notification component for Vue 3

Table of contents

• Installation
• Usage

Installation

npm install --save @shapla/vue-notification

Usage

Note

Use only one ShaplaNotificationContainer component in the app.

You can import Notify anywhere of your app to trigger notification

Styles

with Sass:

import '@shapla/vue-notification/src/index.scss';

with CSS:

import '@shapla/vue-notification/dist/style.css';

Javascript Instantiation

import Notify, {ShaplaNotificationContainer} from '@shapla/vue-notification';

export default {
  name: 'Hello',

  components: {
    ShaplaNotificationContainer
  },
  
  methods: {
    createNotification(type){
      switch (type) {
        case 'info':
          Notify.info('Info message');
          break;
        case 'success':
          Notify.success('Success message', 'Title here');
          break;
        case 'warning':
          Notify.warning('Warning message', 'Close after 3000ms', 3000);
          break;
        case 'error':
          Notify.error('Error message', 'Click me!', 5000);
          break;
      }
    }
  }
}

<button @click="createNotification('info')">Info</button>
<button @click="createNotification('success')">Success</button>
<button @click="createNotification('warning')">Warning</button>
<button @click="createNotification('error')">Error</button>

<shapla-notification-container position='top-right'/>

NotificationContainer Props

Notify API

• Notify.info(message, title, timeout);
• Notify.success(message, title, timeout);
• Notify.warning(message, title, timeout);
• Notify.error(message, title, timeout);