Mohamed Benhida

admin@devma.net

January 1, 2018

Flash Message Using Vuejs & Laravel

In this post we will see how can we make a flash message for our website with javascript and php.

in php we will pass the variable with the callback and in javascript we make a global function each time we call it we got a flash message so let's begin.

we create a new VueJs component we name it Flash.vue

resources/js/components/Flash.vue

<template>
    <div class="alert alert-success spacing" role="alert" v-show="show">
        {{ body }}

    </div>
</template>

<script>
    export default {
        props: ['message'],
        data() {
            return {
                show : false,
                body : ''
            }
        },
        created() {
            if(this.message) {
                this.flash(this.message)
            }
        },
        methods: {
            flash(message) {
                this.show = true
                this.body = message
            },
            hide() {
                this.show = false
            }
        }
    }
</script>

<style>
    .spacing {
        position: fixed;
        right: 25px;
        bottom: 25px;
    }
</style>

Now we have to declare the component on

resources/js/app.js

Vue.component('flash', require('./components/Flash.vue'));

I made a form where you can enter the content of the flash message and every time you click on send flash it will appear a new flash

resources/views/flash.blade.php

<html>
<head>
    <title>Flash Message</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"
          integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
</head>
</html>

<div class="container" id="app">
    <flash message="{{ session('flash') }}"></flash>
    <div class="row justify-content-center mt-4">
        <div class="col-4">
            <form class="form-control m-t-20" action="/flashButton" method="get">
                <div class="form-group">
                    <label for="message">Message</label>
                    <input type="text" class="form-control" name="message">
                </div>
                <button class="btn btn-primary" type="submit">Send Flash</button>
            </form>

        </div>
    </div>
</div>

<script src="{{ asset('js/app.js') }}"></script>

routes/web.php

Route::get('flash', function ()
{
    return view('flash');
});

Route::get('flashButton', function ()
{
    return back()->with('flash', request()->message);
});

Everything will works fine if you followed the steps.

But there is some issues the flash don't disappear and we have only the php version but we need also a javascript one for example if we made an ajax request we need to call the flash on our javascript code too.

For adding the time out for our flash we just need to add the setTimeout() function

setTimeout(() => {
   this.hide()
},3000)

resources/js/components/Flash.vue

<template>
    <div class="alert alert-success spacing" role="alert" v-show="show">
        {{ body }}

    </div>
</template>

<script>
    export default {
        props: ['message'],
        data() {
            return {
                show : false,
                body : ''
            }
        },
        created() {
            if(this.message) {
                this.flash(this.message)
            }
        },
        methods: {
            flash(message) {
                this.show = true
                this.body = message

                setTimeout(() => {
                    this.hide()
                },3000)
            },
            hide() {
                this.show = false
            }
        }
    }
</script>

<style>
    .spacing {
        position: fixed;
        right: 25px;
        bottom: 25px;
    }
</style>

In this 3 sec the flash will disappear.

Now we work on the javascript side

on our app.js file we add a global function flash and use the Vuejs $emit(Start an Event)

resources/js/app.js

window.events = new Vue();

window.flash = function(message) {
    window.events.$emit('flash',message);
}

We come to our Flash.vue and we listen for this event

window.events.$on('flash',(message) => this.flash(message))

If the event flash is on we call the flash method.

resources/js/components/Flash.vue

<template>
    <div class="alert alert-success spacing" role="alert" v-show="show">
        {{ body }}

    </div>
</template>

<script>
    export default {
        props: ['message'],
        data() {
            return {
                show : false,
                body : ''
            }
        },
        created() {
            if(this.message) {
                this.flash(this.message)
            }
            window.events.$on('flash',(message) => this.flash(message))
        },
        methods: {
            flash(message) {
                this.show = true
                this.body = message

                setTimeout(() => {
                    this.hide()
                },3000)
            },
            hide() {
                this.show = false
            }
        }
    }
</script>

<style>
    .spacing {
        position: fixed;
        right: 25px;
        bottom: 25px;
    }
</style>

 if we call the flash method on our browser console we will see a flash message like that

flash

 

© Mohamed Benhida.

Blog | Packages | About