If you want to send form data to Laravel controller from Vue Jas axios post request. And want to insert this form data into MySQL database. so this tutorial is for you.
So, In this tutorial, You will learn how to post form data using axios HTTP post request in laravel 10 with vue 3 js.
Laravel 10 Vue 3 JS Axios Post Request Example
When you need to submit form data to a server, you can use the axios.post method along with the appropriate configuration. Here’s a step on how to use Axios to make a POST request with form data in laravel 10 vue js apps:
- Step 1: Install Laravel 10 App
- Step 2: Configure Database to App
- Step 3: Create Migration & Model File
- Step 4: Define Routes
- Step 5: Create 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 10 App
First of all, Open your terminal or command prompt.
Then execute the following command into it to download or install Laravel 10 new setup in your server:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Configure Database to App
Once you have installed laravel 10 apps. Now, you need to configure your database with your laravel apps.
So, visit your app root directory and find .env file. Then configure database details as follows:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=here your database name here DB_USERNAME=here database username here DB_PASSWORD=here database password here
Step 3: Create Migration & Model File
Execute the following command on terminal or command prompt to create a migration file and model for our post table:
php artisan make:model Post -m
after that, open your posts migration file and paste the following code:
Schema::create('posts', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->timestamps();
});
Again open your terminal and run the php artisan migrate to migrate our tables into your database:
php artisan migrate
Step 4: Define Routes
Add the following routes into your route file. So go app/routes/web.php and update the following routes:
routes/web.php
use App\Http\Controllers\PostController;
Route::get('post', [PostController::class, 'index'])->name('post');
Route::post('post', [PostController::class, 'createPost']);
Step 5: Create Controller By Command
Now open your terminal or cmd and run the following command to create controller file:
php artisan make:controller PostController
This command will create a controller that named PostController inside the controller folder.
Next, open app/Https/Controller/PostController.php and update the following methods in your PostController file:
<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
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.
npm install
now open webpack.mix.js file and update the following code into your 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 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('/post',{title: this.newPost, user_id:userId})
.then((response)=>{
$('#success').html(response.data.message)
})
}
}
}
</script>
The above code is to send form data to controller using axios post request in laravel.
Next, Go to resources/assets/js then open app.js file and intialize vue js components in this file.
So open app.js file and update 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
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 your 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 you are ready to run this app, so hit the below URL into your browser:
http://localhost:8000/post
Conclusion
In this Laravel 10 vue js axios post request example, you have learned how to send form data with parameters uisng axios post request with vue js in laravel.
