RTLer/app.js

## app.js
Vue.component('child', {
    ready(){
        // send flash message
        this.$root.$broadcast('flashMessage',{
            text: 'Better check yourself, you\'re not looking too good.',
            type: 'warning',//optional
            important: false,//optional
            timeout: 5000//optional

        });
    }
});
import flashMessage from 'flash-message.vue';
new Vue({
    el: 'body',
    components:{
        flashMessage
    }
});

## flash-message.vue
<template>
    <div class="alert alert-dismissible alert-{{message.type}}"
         role="alert"
         v-for="message in messages | filterBy true in 'show'"
         transition="fade"
    >{{message.handleShowEvent()}}
        <button type="button" class="close" v-show="message.important" @click="message.remove()">
            <span aria-hidden="true">&times;</span>
        </button>
        <strong>{{message.type|capitalize}}!</strong> {{message.text}}
    </div>
</template>
<style>
</style>
<script>
    export default{
        name: 'flash-message',
        data() {
            return {
                messages: []
            };
        },
        methods: {
            addMessage(message){
                {
                    this.messages.push({
                        text: message.text,
                        type: (typeof message.type == 'undefined') ? 'info' : message.type,
                        show: (typeof message.show == 'undefined') ? true : message.show,
                        timeout: (typeof message.timeout == 'undefined') ? 3000 : message.timeout,
                        important: (typeof message.important == 'undefined') ? false : message.important,
                        remove(){
                            this.show = false;
                        },
                        handleShowEvent(){
                            {
                                if (!this.important) {
                                    setTimeout(
                                            () => this.remove(),
                                            this.timeout
                                    )
                                }
                            }
                        }
                    });
                }
            },
        },
        events: {
            flashMessage(message) {
                this.addMessage(message)
            }
        }
    }
</script>

## index.html
<!DOCTYPE html>
<html lang="en">
<body>

<div class="container">
    <flash-message></flash-message>
    <div class="row">
        <div class="col-lg-12">
            <router-view></router-view>
        </div>
    </div>
</div>
<script src="app.js"></script>
</body>
</html>
	Vue.component('child', {
	ready(){
	// send flash message
	this.$root.$broadcast('flashMessage',{
	text: 'Better check yourself, you\'re not looking too good.',
	type: 'warning',//optional
	important: false,//optional
	timeout: 5000//optional

	});
	}
	});
	import flashMessage from 'flash-message.vue';
	new Vue({
	el: 'body',
	components:{
	flashMessage
	}
	});
	<template>
	<div class="alert alert-dismissible alert-{{message.type}}"
	role="alert"
	v-for="message in messages \| filterBy true in 'show'"
	transition="fade"
	>{{message.handleShowEvent()}}
	<button type="button" class="close" v-show="message.important" @click="message.remove()">
	<span aria-hidden="true">×</span>
	</button>
	<strong>{{message.type\|capitalize}}!</strong> {{message.text}}
	</div>
	</template>
	<style>
	</style>
	<script>
	export default{
	name: 'flash-message',
	data() {
	return {
	messages: []
	};
	},
	methods: {
	addMessage(message){
	{
	this.messages.push({
	text: message.text,
	type: (typeof message.type == 'undefined') ? 'info' : message.type,
	show: (typeof message.show == 'undefined') ? true : message.show,
	timeout: (typeof message.timeout == 'undefined') ? 3000 : message.timeout,
	important: (typeof message.important == 'undefined') ? false : message.important,
	remove(){
	this.show = false;
	},
	handleShowEvent(){
	{
	if (!this.important) {
	setTimeout(
	() => this.remove(),
	this.timeout
	)
	}
	}
	}
	});
	}
	},
	},
	events: {
	flashMessage(message) {
	this.addMessage(message)
	}
	}
	}
	</script>
	<!DOCTYPE html>
	<html lang="en">
	<body>

	<div class="container">
	<flash-message></flash-message>
	<div class="row">
	<div class="col-lg-12">
	<router-view></router-view>
	</div>
	</div>
	</div>
	<script src="app.js"></script>
	</body>
	</html>