Laravel Vue JS Axios Post Request

In this section, we are going to learn about Axios post requests with Vue JS. We will use Laravel to do this. In our application, we can use any version of Laravel, such as Laravel 5, 6, 7, and 8. We will use a CSRF token so that we can send post form input data. Using the controller method, we can access the input data. If we are developing our project in Angular JS or Vue JS, we must have the knowledge of the Axios package for HTTP requests for PUT, POST, GET, and DELETE. In order to send a post request, we will use one input data in our below form.

The Laravel controller method will get all the data of the form when the user submits the form. We will also use the post method to send CRSF tokens. For this, the controller method will be created, and then request data will be returned. After that, we will use the front-end side to print the data. Using the front-end side, the user can easily see the output. Using the Axios and Vue JS, we will create a form and then submit that form. The steps by step process to do this are described as follows:

Step 1:

In this step, we are going to Install Laravel Fresh App. The following command will be useful to get a fresh Laravel 5.6 application. We will use CMD or terminal and then run the command, which is described as follows:

Step 2:

In this step, we are going to Create Route. For this, one post route will be created, and after that, all post form data will be returned. We will use that file and add a new route like this:

routes/web.php

Step 3:

In this step, we are going to Create New Controller. We will create a new controller as PostController. We will create this with the formSubmit method. The request data will be returned by using this method. The code to create a controller is described as follows:

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:

In this step, we are going to perform NPM Configuration. For this, we will first install the Vue JS setup, and after that, we will install NPM. The command to install both is described as follows:

Install vue:

Install npm:

Step 5:

In this step, we are going to Write on app.js and Components. For this, we will first use app.js and write code into it. After that, we will create components of Vue JS. After creating both the files, we will add the following code into these files:

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 </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:

In this step, we are going to Update welcome.blade.php file. The app.js file will be used in that file, which is described as follows:

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 </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 our above code is ready to run. In order to run the above code to update the app.js file, we will use the following command:

When we run this command, the following output will be generated: