Laravel 11 vue js axios post request example; Through this tutorial, i am going to show you how call axios post request in Laravel 11 app with vue js .
Laravel 11 Vue JS Axios Post Request Example
Follow the below given steps to call axios post request in Laravel 11 app with vue js:
- Step 1 – Install Laravel 11 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 11 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 11 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 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
Go to 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 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 11 Axios Post Request Example - Laratutorials.com</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
Run the following command on command prompt to start development server for your Laravel 11 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