Laravel 10/9 Vue JS Get Axios Request Example

Laravel 10/9 vue js get axios request example; Through this tutorial, i am going to show you how to call get axios request in Laravel 10/9 with vue js.

Laravel 10/9 Vue JS Get Axios Request Example

Follow the below given steps to call get axios request in Laravel 10/9 with vue js:

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

Step 1 – Install Laravel 10/9 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 10/9 latest application using the following command:

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

Step 2 – Configure Database with App

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 – Make Routes

In step 3, 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\UserController;


/*
|--------------------------------------------------------------------------
| 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('users', [UserController::class, 'index']);
Route::get('list', [UserController::class, 'list']);

Step 4 – Build Controller By Command

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

php artisan make:controller UserController

Go tot app/Https/Controller/ directory and open UserController.php and add the following methods into your UserController file:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Symfony\Component\HttpFoundation\Response;

use App\Models\User;

class UserController extends Controller
{
    
    public function index()
    {
        return view('users')
        
    }
    public function list()
    {
        return response()->json([
            'users' => User::latest()->get()
        ], Response::HTTP_OK);
        
    }
}

Step 5 – Install Vue Js dependency

Run the following command on command prompt to install the frontend dependencies using the following command:

npm install

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

Then add the following code into your UserComponent.vue file:

<template>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">User List</div>
                
                <div class="card-body">
                <table>
                    <tr>
                        <th width="50%">Name</th>
                        <th width="50%">Email</th>
                    </tr>
                    <tr v-for="user in users" :key="user.id">
                        <td>{{ user.name }}</td>
                        <td>{{ user.email }}</td>
                    </tr>
                </table>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
    export default {
        data() {
            return {
              users: {},
            }
        },
        methods: {
            getUser(){
                axios.get('/list')
                     .then((response)=>{
                       this.users = response.data.users
                     })
            }
        },
        created() {
            this.getUser()
        }
    }
</script>

The above given code is display users list using axios get request in laravel app.

Go to 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('user-component', require('./components/UserComponent.vue').default);
const app = new Vue({
    el: '#app',
});

Step 6 – Create blade file and layout

In step 6, go to 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 10/9 Get Axios 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 users.blade.php inside resources/views directory.

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

@extends('layouts.app')
@section('content')
 <div class="card-body">        
               
   <user-component></user-component>
                 
 </div>           
@endsection

Step 7 – Start Development Server

Run the following command on command prompt to start development server for your Laravel 10/9 vue js axios get request application:

php artisan serve

Step 8 – Run App On Browser

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

http://127.0.0.1:8000/users

Laravel 10/9 Vue JS Get Axios Request Example