@smartweb/vue-flash-message v0.6.10

vue-flash-message

The component to display single flash message to user. It has styles presets, but can be easily customized by passing style object as argument.

Live Demo

Setup

npm i @smartweb/vue-flash-message

Configuration

import Vue from 'vue';
import FlashMessage from '@smartweb/vue-flash-message';
Vue.use(FlashMessage);

You can pass configuration object as second argument

Vue.use(FlashMessage, config);

Configuration object

Usage

Put the component into your template

<FlashMessage></FlashMessage>

Now you can access it by using global EventBus alias (that is "flashMessage" by default) of your Vue instance

this.flashMessage.show({status: 'error', title: 'Error Message Title', message: 'Oh, you broke my heart! Shame on you!'})

Methods

You also can use shorthands without status property.

this.flashMessage.error({title: 'Error Message Title', message: 'Oh, you broke my heart! Shame on you!'});
this.flashMessage.warning({title: 'Warning Message Title', message: 'Don\'t stop me nooooow....!'});
this.flashMessage.info({title: 'Info Message Title', message: 'Just want you to know, that Vue is so cool'});
this.flashMessage.success({title: 'Success Message Title', message: 'Hoorah, it is my fist npm package and it works!'});

Data Object

The first argument - is data object.

Example:

    methods: {
        deleteTrouble() {
            this.$axios.delete(`/delete/trouble/${trouble.id}`)
                .then( res => {
                    let { status, data, error } = res.data;
                    if(status) {
                        this.flashMessage.success({
                            title: 'Don\'t Warry',
                            message: 'Be Happy!',
                            time: 5000,
                            flashMessageStyle: {
                                backgroundColor: 'linear-gradient(#e66465, #9198e5)'
                            }
                        });
                    }
                    else {
                        this.flashMessage.error({title: error.name || 'Error', message: error.message});
                    }
                })
                .catch(e);
        }
    }

Callbacks

As second argument you can pass object with two properties: "mounted" and "destroyed".

Example:

<p>{{ text }}</p>
<button @click="clickHandler" type="button" name="button">Show Text!</button>

    methods: {
        showText() {
            this.text = 'Hello from callback!'
        },
        clearText() {
            this.text = 'Bye... 1, ..2, ..3';
            setTimeout( () => this.text = '', 3000);
        },
        clickHandler() {
            this.flashMessage.info({
                title: 'Ooooooops!',
                message: 'Do you see this text? Wtf?'
            },
            {
                mounted: showText,
                destroyed: clearText
            })
        }
    }