How to Install and Use Axios Get Request in Laravel 10

How to Install and Use Axios Get Request in Laravel 10

If you are developing any app with vue js in Laravel web applications. You have to show or get the data on the vue js component with an Axios GET request. so what will you do?

The primary use of an Axios GET request is to retrieve data from a server. When you make a GET request using Axios, you specify a URL endpoint from which you want to fetch data. The request is then sent to the server, which processes the request and returns the requested data in the response.

GET requests are typically used to retrieve information or resources from a server, such as fetching data from an API, retrieving web pages, or accessing files stored on a server. For example, you can use Axios GET requests to fetch JSON data from a RESTful API, HTML content from a web page, or images stored on a server.

In this tutorial, you will learn how to install and use get axios request in laravel vue js to retrieve data from the database and send data to vue js views components.

Laravel 10 VUE 3 JS Axios Get Request Example Tutorial

By using the following steps, you can make Axios HTTP get a request in Laravel vue js app to send or pass data from the controller to vue component:

  • Step 1: Install Laravel 10 App
  • Step 2: Configure Database to App
  • 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: Install Laravel 10 App

First of all, Open your terminal or command prompt (cmd).

Then execute the following command into it to download or install Laravel 10 new setup in your server:

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

Step 2: Configure Database to App

Once you have installed laravel 10 apps. Then configure the database with your apps. So, visit your app root directory and find .env file. Then configure database details as follows:

  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 generating fake data into the 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()

Step 4: Add Routes

Add the following routes to your 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 your terminal and run the following command:

php artisan make:controller UserController

This command will create a controller 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\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 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',
});

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 10 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.

Recommended Laravel Posts

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. 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 *