Laravel Vue JS Axios Post Request Example Tutorial

Hi Artisan,

In this tutorial, i will guide you step by step how to create laravel and vue js axios post request example. we will lean how to send http request using axios in vue js. we will send post request with parameter as array or form data in vue js.

axios is a http client library. axios provide to send get, post, put, delete request with parameter, formdata, headers, string, image, multipart/form-data etc. axios is a awesome library for http requests.you can axios git repository and have a look on it. Axios git repository

In this example i will create a simple html form and send post request this data to controller and save them into database. You can also understand clear to how to send http post request.

You need to just follow few step to make axios http post request. so let's follow bellow steps and done axios post request.

Step 1: Install Laravel 6

First of all, we need to get fresh Laravel 6 version application using bellow command because we are going from scratch, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Step 2:  Setup Migration

To create our project migration for our post table, run below command

php artisan make:model Post -m

after doing it open your posts migration file and paste this following code.

Schema::create('posts', function (Blueprint $table) {
     $table->bigIncrements('id');
     $table->string('title');
     $table->timestamps();
});

Now run php artisan migrate to migrate our table.

php artisan migrate

Step 3:  Setup Route

routes/web.php

Route::get('/post', 'PostController@index')->name('post';
Route::post('/post', 'PostController@createPost');

Step 4:  Setup Controller

Now create a PostController and open it PostController and paste this following code.

app/Https/Controller/PostController.php

namespace App\Http\Controllers;

use App\Post;
use App\Events\PostCreated;
use Illuminate\Http\Request;

class PostController extends Controller
{
    
    public function index()
    {
       return view('post.create');
    }

    public function createPost(Request $request)
    {
        $post = new Post;
        $post->title = $request->title;
        $post->save();

        return response()->json([
            'message' => 'New post created'
        ]);
    }
}

Now open Post model and paste this following code.

app/Post.php

namespace App;

use App\Events\PostCreated;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $guarded = [];

}

Step 5:   Install Vue dependency and edit configurations

Now, go inside the project folder and install the frontend dependencies using the following command.

npm install

now open this followng file and paste this code. Make an asstes folder inside resources folder and copy js and sass folder inside it. Thats all. We need it to setup our laravel mix.

Read also : Laravel Vue JS CRUD Example With File Upload and Pagination

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js/app.js')
    .sass('resources/assets/sass/app.scss', 'public/css/app.css');

now create a PostComponent to create our post and paste this code.

resources/assets/js/components/PostComponent.vue

Now see axois.post request accept two parameter, first parameter is url and second parameter is data object. Those data we are sending to controller with axois http post request. now open app.js file and paste this followng code.

resources/assets/js/app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('post-component', require('./components/PostComponent.vue').default);

const app = new Vue({
    el: '#app',
});

Step 6:   Setup blade file

Now time to setup our blade file. open resources/layouts/app.php and paste this following code.

resources/views/layouts/app.blade.php

Now open resources/views/post/create.blade.php file and paste this code. 

resources/views/post/create.blade.php

Now everything is set to go. Now just we have to compile our all javascript file. so run below command.

npm run dev 
//or
npm run watch

Then visit this following url, then you will see a form to create post. Just create a post then you should complete this axois post request example from scratch tutorial.

http://localhost:8000/post

Hope you enjoy this tutorial and hope it will help you to learn how to send http post request using axios with vue js in laravel. That's it.