Beautiful Flash Messages In Vue

Description:

A Vue.js notification component to send beautiful flash messages of various types to the end-user.

Notification types:

• Default
• Error
• Warning
• Info
• Success

Basic Usage:

Import the flash message component.

import Vue from 'vue';
import FlashMessage from '@smartweb/vue-flash-message';

Register the component.

Vue.use(FlashMessage);
// or
Vue.use(FlashMessage, config);

Insert the component in your template.

<FlashMessage></FlashMessage>

Display a flash message in the app.

this.flashMessage.show({
  status: 'info',
  title: 'Message Title',
  message: 'Message Here'
});

// or
this.flashMessage.error({
  title: 'Message Title',
  message: 'Message Here'
});
this.flashMessage.warning({
  title: 'Message Title',
  message: 'Message Here'
});
this.flashMessage.info({
  title: 'Message Title',
  message: 'Message Here'
});
this.flashMessage.success({
  title: 'Message Title',
  message: 'Message Here'
});

All props to config the flash message.

• status: ‘error’, ‘warning’, ‘info’, ‘success’
• title: message title
• message: message
• time: duration in ms
• icon: custom icon
• clickable: click to close the flash message
• blockClass: custom class name
• iconClass: custom class name for icon
• contentClass: custom class name for container
• position: ‘top left’, ‘top right’, ‘bottom left’, ‘bottom right’
• x: x position
• y: y position

Preview:

Changelog:

09/19/2020

• v0.6.5

Download Details:

Author: smwbtech

Live Demo: https://smwbtech.github.io/vue-flash-message/

Download Link: https://github.com/smwbtech/vue-flash-message/archive/master.zip

Official Website: https://github.com/smwbtech/vue-flash-message

Install & Download:

# NPM
$ npm install @smartweb/vue-flash-message --save

You Might Be Interested In: