Laravel 9 Vue JS Axios Get Request Tutorial

Laravel 9 Vue js Axios get request example. In this tutorial, we will learn how to use vue js to get Axios requests in laravel 9 apps with vue js.

This tutorial will guide us step by step on how to retrieve data from a database using Axios to get HTTP requests and as well as how to render data on Vue js components in laravel.

Laravel 9 Vue JS Axios Get Request Tutorial

Just follow the following steps and make Axios HTTP get a request in laravel with Vue js and pass data blade views or controller to vue component laravel:

• Step 1: Download Laravel Fresh Setup
• Step 2: Setup Database Credentials
• Step 3: Generate Fake Data
• Step 4: Add 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: Download Laravel Fresh Setup

Use the following command to install the laravel fresh setup. So open terminal OR command prompt and run the following command:

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

Step 2: Setup Database Credentials

After successfully downloading laravel Application, Go to project root directory and open .env file. Then set up database credential as follow:

  DB_CONNECTION=mysql 
  DB_HOST=127.0.0.1 
  DB_PORT=3306 
  DB_DATABASE=here database name here
  DB_USERNAME=here database username here
  DB_PASSWORD=here database password here

Step 3: Generate Fake data

Before generating fake data into the database table, open terminal and run the PHP artisan migrate to migrate our tables into database:

php artisan migrate

Now, use the following artisan command to generate dummy data:

php artisan tinker
// then
factory(\App\User::class,10)->create()

Step 4: Add Routes

Add the following routes into route file. So go app/routes/web.php and update the following routes:

routes/web.php

use App\Http\Controllers\UserController;

Route::get('users', [UserController::class, 'index']);
Route::get('list', [UserController::class, 'list']);

Step 5:  Create Controller By Command

Now open terminal and run the following command:

php artisan make:controller UserController

This command will create a controller that names UserController inside the controller folder.

Next, open it app/Https/Controller/UserController.php and update the following methods into UserController file:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;

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

Step 6: Install Vue Js dependency

Now, go inside the project folder and install the frontend dependencies using the following command.

npm install

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

Then update the following code into 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 code is to display users’ lists using Axios get requests in laravel.

Next, Go to resources/assets/js then open the app.js file and initialize vue js components in this file.

So open app.js file and update the following code into 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 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 users.blade.php.

And update the following code into your users.blade.php view file:

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

Step 8: Run Development Server

Now everything is set to go. Now just we have to compile our all javascript files. so run the below command.

npm run dev 
//or
npm run watch

Now we are ready to run this app, so hit the below URL in to browser:

http://localhost:8000/users

Conclusion

In this tutorial, we have learned how to display data on vue components uisng axios get request with vue js in laravel.

Recommended Laravel Tutorials