Laravel 9 Vue JS Post Axios Request Tutorial

Laravel 9 Axios post request example; In this tutorial, we will learn how to send form data with Vue js using Axios post HTTP request in laravel.

This tutorial will guide us step by step on how to send form data to the controller using axios post HTTP request in laravel 9 with Vue js.

Laravel 9 Vue JS Post Axios Request Tutorial

Follow the following steps to make Axios post request in laravel 9 with vue js apps:

Step 1: Install Laravel 9 App
Step 2: Connecting App to Database
Step 3: Make Migration & Model
Step 4: Add Routes
Step 5: Make Controller By Command
Step 6: Install Vue Js dependency
Step 7: Create blade file and layout
Step 8: Run Development Server

Step 1: Install Laravel 9 App

Use the following command to install the laravel fresh setup. So open terminal OR command prompt and run the following command:

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

Step 2: Connecting App to Database

After successfully downloading laravel Application, Go to the project root directory and open .env file. Then set up database credential as follow:

  DB_CONNECTION=mysql 
  DB_HOST=127.0.0.1 
  DB_PORT=3306 
  DB_DATABASE=here database name here
  DB_USERNAME=here database username here
  DB_PASSWORD=here database password here

Step 3: Make Migration & Model

Use the following command to create a migration file and model for our post table:

php artisan make:model Post -m

after that, open posts migration file and paste the following code:

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

Again open terminal and run the php artisan migrate to migrate our tables into database:

Step 4: Add Routes

Add the following routes into route file. So go app/routes/web.php and update the following routes:

routes/web.php

use AppHttpControllersPostController;

Route::get('post', [PostController::class, 'index'])->name('post');
Route::post('post', [PostController::class, 'createPost']);

Step 5: Make Controller By Command

Now open terminal and run the following command:

php artisan make:controller PostController

This command will create a controller that name PostController inside the controller folder.

Next, open it app/Https/Controller/PostController.php and update the following methods into PostController file:

<?php
namespace AppHttpControllers;
use AppModelsPost;
use IlluminateHttpRequest;
class PostController extends Controller
{
    
    public function index()
    {
       return view('post');
    }
    public function createPost(Request $request)
    {
        $post = new Post;
        $post->title = $request->title;
        $post->save();
        return response()->json([
            'message' => 'New post created'
        ]);
    }
}

Step 6: Install Vue Js dependency

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

now open webpack.mix.js file and update the following code into file. 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.

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

Next Go to resources/assets/js/components/ folder. And create a new components name PostComponent.vue.

Then update the following code into PostComponent.vue file:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Create new post</div>
                    <div class="card-body">
                        <p id="success"></p>
                        <form @submit.prevent="addNewPost">
                            <input type="text" name="title" v-model="newPost">
                            <input type="submit" value="Submit">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        
        data(){
            return {
              newPost: ''
            }
        },
        methods: {
            addNewPost(){
                axios.post('/post',{title: this.newPost, user_id:userId})
                .then((response)=>{
                $('#success').html(response.data.message)
                })
            }
        }
    }
</script>

The above code is to send form data to the controller using Axios post request in laravel.

Next, Go to resources/assets/js then open app.js file and initialize vue js components in this file.

So open app.js file and update the following code into app.js file:

require('./bootstrap');
window.Vue = require('vue');
Vue.component('post-component', require('./components/PostComponent.vue').default);
const app = new Vue({
    el: '#app',
});

Step 7: Create blade file and layout

Now, Open resources/layouts/app.blade.php and update the following code into it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
    <title>Send form data with vue js in laravel</title>
</head>
<body>
    
    <div id="app">
    <div class="py-4">
        @yield('content')
    </div>
    
    </div>
    <script src="{{ mix('js/app.js') }}" defer></script>
</body>
</html>

Next, resources/views/ and create a new blade view file name post.blade.php.

And update the following code into post.blade.php view file:

@extends('layouts.app')
@section('content')
  <post-component></post-component>
           
@endsection

Step 8: Run Development Server

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

Now we are ready to run this app, so hit the below URL into browser:

http://localhost:8000/post

Conclusion

In this tutorial, we have learned how to send form data with parameters uisng axios post request with vue js in laravel.