To show flash message with vue js in laravel 9 app. In this tutorial, we will learn how to display a flash messages with vue js components in laravel apps.
Many times, we submit a send or submit the form using Vue js. Then, we need to display a flash message like alert, notification, or flash message with Vue js in laravel.
The vue js flash message in laravel looks like:
Laravel 9 Vue JS Flash Messages Example
Follow the following steps to implement flash messages in laravel vue js apps:
- Step 1: Install Laravel 9 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 9 App
In this step, we need to install laravel latest application setup, So open 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 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 database name here DB_USERNAME=here database username here DB_PASSWORD=here database password here
Step 3: Create Model And Migration
Next step, open 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
We 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 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 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 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 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, we 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 9 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, we have learned how to show a flash message with Vue js in laravel apps.