Laravel Vue Flash Message Example From Scratch

Laravel Vue Flash Message Example From Scratch

In this post we will give you information about Laravel Vue Flash Message Example From Scratch. Hear we will give you detail about Laravel Vue Flash Message Example From ScratchAnd how to use it also give you demo for it if it is necessary.

Today, I will show you how to implement flash message using vue js in laravel 5 application. We will built vue flash message in laravel 5 website. 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. It is completed without any package we will simply done using vue component.

In 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.

Preview:

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');

Also see:Dynamic Form Validation in VueJs with PHP Laravel 5.6

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

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;

class PostController extends Controller

{

/**

* success response method.

*

* @return IlluminateHttpResponse

*/

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

<template>

<div >

<div >

<div >

<div >

<div > Laravel Vue Flash Message Example From Scratch - ItSolutionStuff.com</div>

<div >

<form @submit="formSubmit">

<strong> Name:</strong>

<input type="text" v-model="name">

<strong> Description:</strong>

<textarea v-model="description"> </textarea>

<button > 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 {

name: '',

description: '',

output: ''

};

},

methods: {

formSubmit(e) {

e.preventDefault();

let currentObj = this;

axios.post('/formSubmit', {

name: this.name,

description: this.description

})

.then(function (response) {

currentObj.output = response.data;

flash('Post Request Added Created.', 'success');

})

.catch(function (error) {

currentObj.output = error;

});

}

}

}

</script>

resources/assets/js/components/Flash.vue

<template>

<div 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>

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

<!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 Vue Flash Message Example From Scratch - ItSolutionStuff.com</title>

<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">

</head>

<body>

<div id="app">

<flash message=""></flash>

<example-component></example-component>

</div>

<script src="{{asset('js/app.js')}}" ></script>

</body>

</html>

Now you have to run below command for update app.js file:

Also see:Laravel Vue JS File Upload Using vue-dropzone Example

npm run dev

Now you can check our example and also check demo.

I hope it can help you…

Hope this code and post will helped you for implement Laravel Vue Flash Message Example From Scratch. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  88  =  96

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US