Laravel 8 Vue JS Flash Message Tutorial

Display flash message using vue js in laravel 8 app. In this tutorial, you will learn how to display a flash messages with vue js components in laravel apps.

Many times, you submit a send or submit the form using Vue js. After that, you need to display a flash message like alert, notification, or flash message with Vue js in laravel. 

So this tutorial will guide you step by step on how to display flash messages after submitting a form with Vue js in laravel.

The vue js flash message in laravel looks like:

laravel flash message
laravel flash message

Display Flash Message Using Vue JS in Laravel 8

  • 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

In this step, you need to install laravel latest application setup, So open your terminal OR command prompt and execute the following command:

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

Step 2: Connecting App to Database

After successfully install laravel new application, Go to 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: Create Model And Migration

Next step, open your terminal and execute the following command:

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

You need to 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

Next step, go to 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

Next step, open your command prompt and 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 - tutsmake.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

Related Posts