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

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) {
     * Reverse the migrations.
     * @return void
    public function down()

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:


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:

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:

    <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> 
                        <strong> Output:</strong> 
    export default {
        mounted() {
            console.log('Component mounted.')
        data() {
            return {
              title: '',
              description: '',
              output: ''
        methods: {
            formStore(e) {
                let currentObj = this;
      '/store', {
                    title: this.title,
                    description: this.description
                .then(function (response) {
                    currentObj.output =;
                    flash('Post Created Successfully', 'success');
                .catch(function (error) {
                    currentObj.output = error;

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

    <div class="alert alert-success spacing" role="alert" v-show="show">
        {{ body }}
    export default {
        props: ['message'],
        data() {
            return {
                show : false,
                body : ''
        created() {
            if(this.message) {
  $on('flash',(message) => this.flash(message))
        methods: {
            flash(message) {
       = true
                this.body = message
                setTimeout(() => {
            hide() {
       = false
    .spacing {
        position: fixed;
        right: 25px;
        bottom: 25px;

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

window.Vue = require('vue'); = new Vue();
window.flash = function(message) {$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>
        <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 -</title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
        <div id="app">
            <flash message=""></flash>
        <script src="{{asset('js/app.js')}}" ></script>

Step 9: Run Development Server

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

npm run dev
npm run watch


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

Recommended Laravel Posts

Leave a Comment