Laravel 8 Vue JS Axios Get Request Tutorial Example

In this tutorial you will learn about the Laravel 8 Vue JS Axios Get Request Tutorial Example and its application with practical example.

In this Laravel 8 Vue JS Axios Get Request Example tutorial, I’ll show you how to implement get request with Vue JS Axios in laravel. In this tutorial you will learn to create get request with Vue JS Axios in laravel. In this article I will demonstrate you to create get request with Vue JS Axios in laravel.

Table Of Contents−

Laravel 8 Vue JS Axios Get Request Tutorial Example

In this step by step tutorial we will learn to create get request with Vue JS Axios in laravel. Please follow the instruction given below:

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

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

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

Step 2: Setup Database Credentials

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

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

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

Now, in this step we will generate some dummy data.

php artisan migrate

1	php artisan migrate

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

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

php artisan tinker

// then

factory(\App\User::class,10)->create()

Step 4: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\UserController;
 
Route::get('users', [UserController::class, 'index']);
Route::get('list', [UserController::class, 'list']);

use App\Http\Controllers\UserController;

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

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

Step 5: Create Controller By Command

Now, lets create a controller named UserController using command given below –

php artisan make:controller UserController

1	php artisan make:controller UserController

Now, open app/Https/Controller/UserController.php and put 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);
         
    }
}

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

In this step we will install required dependencies using following command:

npm install

1	npm install

Go to resources/assets/js/components/ folder. And create a new components name UserComponent.vue. Then put 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>

<table>

<tr>

<th width="50%">Email</th>

</tr>

<td>{{ user.email }}</td>

</tr>

</table>

</div>

</template>

export default {

data() {

return {

users: {},

}

methods: {

getUser(){

axios.get('/list')

.then((response)=>{

this.users = response.data.users

})

}

created() {

this.getUser()

}

</script>

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',
});

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>

<!DOCTYPE html>

<head>

<title>{{ config('app.name', 'Laravel') }}</title>

<title>Send form data with vue js in laravel</title>

</head>

<body>

@yield('content')

</div>

</body>

</html>

Next, resources/views/ and create a new blade view file name users.blade.php. And put 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

@extends('layouts.app')

@section('content')

<user-component></user-component>

</div>

@endsection

Step 8: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

npm run dev 
//or
npm run watch

npm run dev

//or

npm run watch

Now, open the following URL in browser to see the output –

http://localhost:8000/users

1	http://localhost:8000/users

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Vue JS Axios Get Request Tutorial Example