Laravel Vue Flash Message From Scratch

 Today, I will tell you the best way to carry out streak message involving vue js in laravel 5 application. We will assembled vue streak message in laravel 6, laravel 7, laravel 8 and laravel 9 site. Commonly we really want to show like caution, warning or blaze message after trigger cycles like after make, update and erase thing.

This model will assist with involving streak message in vue js task or site. It is finished with no bundle we will basically done utilizing vue part.

In this model, we will make basic ajax post demand utilizing axios and after that we will set off streak message. Along these lines, simply follow this model and how about we perceive how to make it accomplished for streak message.

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');

Read Also: Dynamic Form Validation in VueJs with PHP Laravel 5.6

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 App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class PostController extends Controller
{
    /**
     * success response method.
     *
     * @return \Illuminate\Http\Response
     */
    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 class="container"> 
        <div class="row justify-content-center"> 
  
            <div class="col-md-8"> 
                <div class="card"> 
                    <div class="card-header"> Laravel Vue Flash Message Example From Scratch - ItSolutionStuff.com</div> 
    
                    <div class="card-body"> 
                        <form @submit="formSubmit"> 
                        <strong> Name:</strong> 
                        <input type="text" class="form-control" v-model="name"> 
                        <strong> Description:</strong> 
                        <textarea class="form-control" v-model="description"> </textarea> 
   
                        <button class="btn btn-success"> 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 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>

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: