Javatpoint Logo
Javatpoint Logo

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

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

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

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:

Laravel Vue JS Axios Post Request
Next Topic#




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA