Display Flash Message Using Vue JS in Laravel
Flash message using vue js in laravel is the today's topic. Today, I will show you how to implement flash message using Vue js in Laravel application. We will built vue lash message in Laravel website.
It is awesome and not so tough to create such system in our Laravel app. Many developer creates flash message using Vue js in Laravel application to show user nice and attractive flash message .
Many times we need to display like alert, notification or flash message after trigger processes like after create, update and delete item.This example will help to use flash message in Vue js project or website.
Let's try to create vue flash message example in Laravel 7. You have to follow step by step to do it.
Read more : How to create seo friendly url in laravel using vue js ?
It is completed without any package we will simply done using Vue this example, we will create simple ajax post request using axios and after that we will trigger flash message. So, just follow this example and let's see how to make it done for flash message.
Now let's start our tutorial.
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');
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
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PostController extends Controller
{
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
resources/assets/js/components/Flash.vue
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
Now you have to run below command for update app.js file:
npm run dev
Now you can check our example. I hope it can help you.