Laravel Vue JS Axios Get Request Example

Hi Artisan

In this tutorial i will discuss step by step about laravel axios get request example. I have already made a tutorial on laravel axios post example some day ago. If you dont know how to make laravel axios post. Then you cam read this below article

Read : Laravel Vue JS Axios Post Request Example Tutorial

But in this tutorial i am going to show laravel axios get example. axios is a http client library. axios provide to send get, post, put, delete request with parameter, formdata, headers, string, image, multipart/form-data etc.

axios is a awesome library for http requests.you can axios git repository and have a look on it. Axios git repository So let's start our simple laravel vue axios tutorial.

In this example i will use User model to fetch data. So we no need extra model or migration.

Step 1: Laravel Installation

For completing our vue laravel axois get request example, we need a fresh laravel app. Just download it.

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

Step 2: Define the routes

Now, we need to define the API routes inside the routes >> web.php file.

routes/web.php

Route::get('/userlist','UserController@index')->name('userlist');

Step 3 : Create Controller

To quickly create UserController, run below command

php artisan make:controller UserController 

Now open user controller and paste those following code.

app/Http/Controllers/UserController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;

class UserController extends Controller
{
    public function index()
    {

        return response()->json([

            'users' => \App\User::latest()->get()

        ], Response::HTTP_OK);
        
    }

}

Step 4 : Install Vue dependency

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

npm install

Step 5: Setup app.js file

resources/js/app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('user-component', require('./components/UserComponent.vue').default);

const app = new Vue({
    el: '#app',
});

Read also : Laravel 6 Ajax Form Submit With jQuery Validation

Step 6 : Create UserComponent

Now we have to create user component for making axios get request example after creating user component.

just paste this below code to complete our laravel vue js axios get request tutorial.

resources/js/components/UserComponent.vue

Step 7 : Create Blade File

Now we have to create our view file to see our users table. So create it inside this following delectory

resources/views/welcome.blade.php

After creating some dummy users, you should see the below image

You can simply use tinker to make dummy users. Just do it

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

Now run this below command to compile our entire javascript file

npm run dev
//or
npm run watch

Now if you visit this below url you can see all users.

http://localhost:8000

And now you are ready to check this vue axois get request example in laravel 6 tutorial. Hope i can help you.