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:

Beautiful Flash Messages In Vue

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:

One Response

  1. Brian February 22, 2021

Add Comment