Hello artisan,
In this tutorial, I will show you how to implement that display flash message in laravel 9 using vue js. It is good practice to show alert message to users that your action has taken successfully. We can do it using flash message or toastr message in vue js laravel 9.
If you do not know how to implement flash message in vue js laravel 9 application then this example is for you. Let's see the example code of display flash message vue laravel application.
Now let's start our tutorial.
Step 1 : Install Laravel
Here, we will get a fresh Laravel 7 application using the bellow command, So open your terminal OR command prompt and run the 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 a new route to that file.
routes/web.php
Route::post('formSubmit','PostController@formSubmit');
Step 3: Create New Controller
in this step, now we have created PostController with form submit methods, in this method we will return request data. So let's create a 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 the setup of vue js and then install npm, so let's run the below 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'
});
And update example component like that:
resources/assets/js/components/ExampleComponent.vue
Update flash component like below:
resources/assets/js/components/Flash.vue
Step 6: Update welcome.blade.php
In the 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 the below command to update the app.js file:
npm run dev
Now you can check our example. I hope it can help you.
#laravel #vue-js