Laravel Vue Flash Message Example From Scratch

Step 1 : Install Laravel

Here, we will get fresh Laravel 5.7 application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Step 2: Add Route

In this step, we will create one post route and return all post form data. So, let’s add new route on that file.

routes/web.php

Route::post('formSubmit','PostController@formSubmit');

Step 3: Create New Controller

in this step, now we have create PostController with formSubmit methods, in this method we will return request data. So let’s create controller:

app/Http/Controllers/PostController.php

<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
class PostController extends Controller
{
    /**
     * success response method.
     *
     * @return IlluminateHttpResponse
     */
    public function formSubmit(Request $request)
    {
    	return response()->json([$request->all()]);
    }
}

Step 4: NPM Configuration

In this step, we have to first add setup of vue js and then install npm, so let’s run bellow command in your project.

Install vue:

php artisan preset vue

Install npm:

npm install

Step 5: Write on app.js and Components

Here, we will write code on app.js and then we will create vue js components, So let’s create both file and put bellow code:

resources/assets/js/app.js

require('./bootstrap');
window.Vue = require('vue');
window.events = new Vue();
window.flash = function(message) {
    window.events.$emit('flash',message);
}
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('flash', require('./components/Flash.vue'));
const app = new Vue({
    el: '#app'
});

resources/assets/js/components/ExampleComponent.vue

<template> 
    <div > 
        <div > 
            <div > 
                <div > 
                    <div > Laravel Vue Flash Message Example From Scratch - ItSolutionStuff.com</div> 
                    <div > 
                        <form @submit="formSubmit"> 
                        <strong> Name:</strong> 
                        <input type="text"  v-model="name"> 
                        <strong> Description:</strong> 
                        <textarea  v-model="description"> </textarea> 
                        <button > Submit</button> 
                        </form> 
                        <strong> Output:</strong> 
                        <pre> 
                        {{output}}
                        </pre> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 
</template> 
<script> 
    export default {
        mounted() {
            console.log('Component mounted.')
        },
        data() {
            return {
              name: '',
              description: '',
              output: ''
            };
        },
        methods: {
            formSubmit(e) {
                e.preventDefault();
                let currentObj = this;
                axios.post('/formSubmit', {
                    name: this.name,
                    description: this.description
                })
                .then(function (response) {
                    currentObj.output = response.data;
                    flash('Post Request Added Created.', 'success');
                })
                .catch(function (error) {
                    currentObj.output = error;
                });
            }
        }
    }
</script> 

resources/assets/js/components/Flash.vue

<template>
    <div  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>

Step 6: Update welcome.blade.php

At last step, we will update our welcome.blade.php file. in this file we will use app.js file and use it, so let’s update.

resources/views/welcome.blade.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel Vue Flash Message Example From Scratch - ItSolutionStuff.com</title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="app">
            <flash message=""></flash>
            <example-component></example-component>
        </div>
        <script src="{{asset('js/app.js')}}" ></script>
    </body>
</html>

Now you have to run below command for update app.js file:

npm run dev

Now you can check our example and also check demo.

I hope it can help you…