Axios POST method in Vue JS with Laravel Back-end

Let’s learn how to use Axios Post method to store data in database, in your Laravel project.

Install new Laravel Project with Vue components

You can get full required knowledge of how to install new Laravel project with Vue JS from 👉 here.

After installing a new Laravel project, we must create and configure our databases. Open your project with suitable text editor(VS Code recommended).

Setting up & configuring Database

Open your MySQL database and create new database. Then open your Laravel project .env file and change your database preferences.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name_here
DB_USERNAME=your_database_username_here
DB_PASSWORD=your_database_password_here

After that, let's create a database migration. Migrations are the way that we create tables in our database. To create database migration, we can use PHP artisan commands.

php artisan make:migration create_user_table

Your migration file will be created inside databases ⇾ migrations folder.

Then add required columns of the table. I’m going to add email and username into table columns.

You must run migrate command to add relevant table to database. For that, we can use,

php artisan migrate

Database migration is done. Then we can work on controller.

Create controller, route setup and other back-end functions

Make a suitable controller for relevant task. So now I’m working with users, because of that I’ll create User Controller using artisan commands.

php artisan make:controller UserController

In that, controller lets create functions to store and create new users. As well we can create web.php file

web.php and UserController.php

Then create a user create.blade.php file inside user folder,
resources folder ⇾ views folder ⇾ user folder ⇾ create.blade.php

@extends('layouts.app')
@section('content')
<div class="container-fluid">
  <user-create></user-create>
</div>
@endsection

In here <user-create></user-create> is the relevant Vue file. We need to create a Vue file and add it to app.js file.

UserCreate.vue

In here, I create separate form and error objects for relevant data. This will help to manage bigger forms in a clear way. Hope this article will help someone and, if you have any idea to improve this code, please comment in below.😇

Thank you!