Laravel 7 Vue JS Axios Get Request Example

Laravel vue js Axios get request example tutorial. Here, you will learn how use vue js get axios request in laravel to fetch records from database and pass data blade to vue js components.

This tutorial will guide you step by step on how to retrive data from database using axios get HTTP requests and as well as how to render data on vue js components in laravel.

Laravel 7 Vue JS Axios Get Request Example Tutorial

Just follow the following steps and make Axios HTTP get 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: Make 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 your terminal OR command prompt and run following command:

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

Step 2: Setup Database Credentials

After successfully download laravel Application, Go to your 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 your database name here
  DB_USERNAME=here database username here
  DB_PASSWORD=here database password here

Step 3: Generate Fake data

Before generate fake data into database table, open your terminal and run the php artisan migrate to migrate our tables into your database:

php artisan migrate

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

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

Recommended:- Laravel 7 Vue Post Axios Request Example

Step 4: Add Routes

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

routes/web.php

Route::get('/users','UserController@index');
Route::get('/list','UserController@list');

Step 5: Make Controller By Command

Now open your terminal and run the following command:

php artisan make:controller UserController

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

Next, open it app/Https/Controller/UserController.php and update the following methods into your 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\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 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 code is to display users list using axios get 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('user-component', require('./components/UserComponent.vue').default);
const app = new Vue({
    el: '#app',
});

Recommended:- Laravel 7 Vue JS Flash Message Example

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 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/users

Conclusion

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

Subscribe to Blog via Email