Laravel 9 Vue JS Axios Get Request Tutorial

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_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

Step 4: Add Routes

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


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:

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:

<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">
                        <th width="50%">Name</th>
                        <th width="50%">Email</th>
                    <tr v-for="user in users" :key="">
                        <td>{{ }}</td>
                        <td>{{ }}</td>
    export default {
        data() {
            return {
              users: {},
        methods: {
                       this.users =
        created() {

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:

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">
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('', 'Laravel') }}</title>
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
    <title>Send form data with vue js in laravel</title>
    <div id="app">
    <div class="py-4">
    <script src="{{ mix('js/app.js') }}" defer></script>

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:

 <div class="card-body">        

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 
npm run watch

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



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


Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *