Laravel Vue JS Axios Post Solicitation Model and Demo

 Are you new with Laravel Vue and Axios?, In the event that indeed, you are the ideal locations. In this instructional exercise, I will impart to you how to send POST demand structure information utilizing axios with vue js in laravel 5, laravel 6, laravel 7, laravel 8 and laravel 9. You will figure out how to send post structure input information with csrf token and you can get to enter information in regulator technique.

Assuming you are learning or working with vue js or rakish js project then you ought to learn and utilize axios bundle for http solicitation of GET, POST, Erase and PUT. In this model we will make one fundamental illustration of structure and with input information, when client submit structure then all information will be ship off laravel regulator technique. we will likewise pass csrf token on our post strategy. we will make regulator strategy and return demand information and afterward basically print on front-end side so you can see yield.

We will make bit by bit structure and afterward submit structure utilizing vue js and axios. you can see following screen shot. You can likewise download code and check demo as well.

Step 1 : Install Laravel Fresh App

Here, we will get fresh Laravel 5.6 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: Create 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');

Read Also: Laravel 5 and Vue JS CRUD with Pagination example and demo from scratch

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 App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class PostController extends Controller
{
    /**
     * success response method.
     *
     * @return \Illuminate\Http\Response
     */
    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');
 
Vue.component('example-component', require('./components/ExampleComponent.vue'));
 
const app = new Vue({
    el: '#app'
});

resources/assets/js/components/ExampleComponent.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Laravel Vue Axios Post - ItSolutionStuff.com</div>
 
                    <div class="card-body">
                        <form @submit="formSubmit">
                        <strong>Name:</strong>
                        <input type="text" class="form-control" v-model="name">
                        <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 {
              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;
                })
                .catch(function (error) {
                    currentObj.output = error;
                });
            }
        }
    }
</script>

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 5.6 Vue JS axios post - ItSolutionStuff.com</title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="app">
            <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:

Read Also: Laravel Vue JS Infinite Scroll Example with Demo

npm run dev