How to Show Flash Message Using Vue JS in Laravel 8

Flash message using vue js in laravel 8 app. In this tutorial; i am going to show you how to display a flash messages with vue js components in laravel apps.

A flash message is used to communicate back to the user of the website or application that an event has taken place. Often times you’ll see a redirect with flash message. This may be something the user intended to do, or it might be something that is just informational.

Laravel 8 Vue JS Flash Message Example Tutorial

  • Step 1: Install Laravel 8 App
  • Step 2: Connecting App to Database
  • Step 3: Create Model And Migration
  • Step 4: NPM Configuration
  • Step 5: Add Routes
  • Step 6: Create Controller By Command
  • Step 7: Create Vue Component
  • Step 8: Register Vue App
  • Step 9: Run Development Server

Step 1: Install Laravel 8 App

Execute the following command on terminal to install laravel latest application:

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

Step 2: Connecting App to Database

Visit your project root directory and open .env file. Then set up database credential in .env file as follow:

 DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=here your database name here
 DB_USERNAME=here database username here
 DB_PASSWORD=here database password here

Step 3: Make Model And Migration

Execute the following command on terminal to make model and migration:

php artisan make:model Post -m

This command will create one model name post.php and also create one migration file for the posts table.

Now open create_postss_table.php migration file from database>migrations and replace up() function with following code:

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->text('description');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

Next, migrate the table using the below command:

php artisan migrate

Step 4: NPM Configuration

Setup Vue and install Vue dependencies using NPM. So execute the following command on command prompt:

php artisan preset vue

Install all Vue dependencies:

npm install

Step 5: Add Routes

Visit routes folder and open web.php file and add the following routes into your file:

routes/web.php

use App\Http\Controllers\PostController;
Route::get('post', function () {
    return view('post');
});
Route::post('store', [PostController::class, 'store']);

Step 6: Create Controller By Command

Execute the following command to create a controller by an artisan:

php artisan make:controller PostController

After that, go to app\Http\Controllers and open PostController.php file. Then update the following code into your PostController.php file:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
Use App\Models\Post;
class PostController extends Controller
{
   
    public function store(Request $request)
    {
        $insert['title'] = $request->get('title');
        $insert['description'] = $request->get('description');
        $check = Post::insertGetId($insert);
        return response()->json($check);
    }
}

Step 7: Create Vue Component

Next step, go to resources/assets/js/components folder and create a file called Post.vue.

And update the following code into your Post.vue components file:

<template> 
    <div class="container"> 
        <div class="row justify-content-center"> 
  
            <div class="col-md-8"> 
                <div class="card"> 
                    <div class="card-header"> Laravel Vue js Flash Message Example </div> 
    
                    <div class="card-body"> 
                        <form @submit="formStore"> 
                        <strong> Title:</strong> 
                        <input type="text" class="form-control" v-model="title"> 
                        <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 {
              title: '',
              description: '',
              output: ''
            };
        },
        methods: {
            formStore(e) {
                e.preventDefault();
                let currentObj = this;
                axios.post('/store', {
                    title: this.title,
                    description: this.description
                })
                .then(function (response) {
                    currentObj.output = response.data;
                    flash('Post Created Successfully', 'success');
                })
                .catch(function (error) {
                    currentObj.output = error;
                });
            }
        }
    }
</script> 

Next, create a new components named flash.vue and update the following code into flash.vue file:

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

Now open resources/assets/js/app.js and include the Post.vue and Flash.vue component as follow:

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

Step 8: Register Vue App

In this step, you need to create a blade view file to define Vue’s app. Go to resources/views folder and make a file named post.blade.php. Then update the below code into post.blade.php file:

<!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 8 Vue Flash Message Example - laratutorials.com</title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="app">
            <flash message=""></flash>
            <post-component></post-component>
        </div>
        <script src="{{asset('js/app.js')}}" ></script>
    </body>
</html>

Step 9: Run Development Server

Open terminal or cmd and execute the following command to start development server:

npm run dev
or 
npm run watch

Conclusion

In this example tutorial, you have learned how to show a flash message with Vue js in laravel apps.

Recommended Laravel Posts

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *