Laravel 8 Vue JS Axios Post Request Tutorial Example

Laravel 8 vue js Axios post request tutorial. In this post, i will show you how make axios post request in laravel 8 app with vue js to store data into database.

Now, i will guide you step by step on how to send data from vue js form to database using axios post HTTP requests in laravel 8 app with vue js.

Vue JS Axios Post Request In Laravel 8

  • Step 1 – Install Laravel 8 App
  • Step 2 – Database Configuration
  • Step 3 – Create Model and Migration
  • Step 4 – Make Routes
  • Step 5 – Build Controller By Command
  • Step 6 – Install Vue Js dependency
  • Step 7 – Create blade file and layout
  • Step 8 – Start Development Server
  • Step 9 – Run App On Browser

Step 1 – Install Laravel 8 App

In step 1, open your terminal and navigate to your local web server directory using the following command:

//for windows user
cd xampp/htdocs

//for ubuntu user
cd var/www/html

Then install laravel 8 latest application using the following command:

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

Step 2 – Database Configuration

In step 2, open your downloaded laravel 8 app into any text editor. Then find .env file and configure database detail like following:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

Step 3: Create Migration & Model

In this step, run the following command on command prompt to create a migration file and model for our post table:

php artisan make:model Post -m

Then open post.php file, which is located inside app/models directory. And add the following code into it:

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

And run the php artisan migrate to migrate on command prompt to create tables into your database:

php artisan migrate

Step 4 – Make Routes

In step 4, open your web.php file, which is located inside routes directory. Then add the following routes into web.php file:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;


/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::get('add-post', [PostController::class, 'index']);
Route::post('add-post', [PostController::class, 'store']);

Step 5 – Build Controller By Command

In step 4, create post controller by using the following command:

php artisan make:controller PostController

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

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Symfony\Component\HttpFoundation\Response;

use App\Models\Post;

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

    public function store(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:

npm install

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

Then add the following code into your 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('/add-post',{title: this.newPost})
                .then((response)=>{
                $('#success').html(response.data.message)
                })
            }
        }
    }
</script>
 

The above given code is display send data to database axios post request in laravel 8 app with vue js.

Next, Visit the resources/assets/js then open app.js file and intialize vue js components in this file.

So open app.js file and add the following code into your 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

In step 7, visit the resources/layouts/app.blade.php and add 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>Laravel 8 Axios Post Request Example Tutorial</title>
</head>
<body>
    
    <div id="app">
    <div class="py-4">
        @yield('content')
    </div>
    
    </div>
    <script src="{{ mix('js/app.js') }}" defer></script>
</body>
</html> 

Now, create new blade view file that named post.blade.php inside resources/views directory.

So, you can add the following php and html form code into post.blade.php:

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

Step 8 – Start Development Server

Finally, open your command prompt again and run the following command to start development server for your laravel 8 vue js axios post request application:

php artisan serve

Step 9 – Run App On Browser

In step 8, open your browser and fire the following url into your browser:

http://127.0.0.1:8000/add-post

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *