article

Saturday, August 27, 2022

Laravel 9 Vue 3 Axios Get Request List all user

Laravel 9 Vue 3 Axios Get Request List all user

How to install laravel 9

https://tutorial101.blogspot.com/2022/02/how-to-install-laravel-9.html

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraveldb
DB_USERNAME=root
DB_PASSWORD=

Database Migration

php artisan migrate

C:\xampp\htdocs\laravel\laravelproject>php artisan migrate
Migration table created successfully.
check database table

Generate Fake data

C:\xampp\htdocs\laravel\laravelproject>php artisan tinker
After opening tinker run the following command for creating dummy records

User::factory()->count(50)->create()

Create Controller

php artisan make:controller UserController 
C:\xampp\htdocs\laravel\laravelproject>php artisan make:controller UserController 

change it with the following codes:
laravelproject\app\Http\Controllers\UserController.php


?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//laravelproject\app\Http\Controllers\UserController.php
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Models\User;
 
class UserController extends Controller
{
    public function index()
    {
        return view('users');
    }
 
    public function list()
    {
       // All user
       $users = User::all();
     
       // Return Json Response
       return response()->json([
          'users' => $users
       ],200);
    }
}
Install Vue 3

npm install vue@next
npm install
npm i vue-loader
npm run dev

create components folder under resources/assets/js/
create vue file UserComponent.vue laravelproject\resources\js\UserComponent.vue
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
//laravelproject\resources\js\UserComponent.vue
<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>
Next, Go to resources/assets/js then open app.js file and intialize vue js components in this file.

open app.js file and update the following code into your app.js file:
laravelproject\resources\js\app.js
?
1
2
3
4
5
6
7
8
9
10
11
//laravelproject\resources\js\app.js
import './bootstrap';
 
import { createApp } from 'vue';
import User from './components/UserComponent'
 
const app = createApp({})
 
app.component('user-component', User)
 
app.mount('#app')
open webpack.mix.js root directory and add .vue()
mix.js('resources/js/app.js', 'public/js')
.vue()

Create blade file and layout
laravelproject\resources\view\users.blade.php
?
1
2
3
4
5
6
7
8
9
//laravelproject\resources\view\users.blade.php
@extends('app')
@section('content')
 <div class="card-body">       
     
   <user-component></user-component>
                   
 </div>          
@endsection
laravelproject\resources\view\app.blade.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//laravelproject\resources\view\app.blade.php
<!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>
Route
laravelproject\routes\web.php
?
1
2
3
4
5
6
7
8
9
10
11
12
//laravelproject\routes\web.php
<?php
 
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
 
Route::get('/', function () {
    return view('welcome');
});
 
Route::get('users', [UserController::class, 'index']);
Route::get('list', [UserController::class, 'list']);
Run Development Server

C:\xampp\htdocs\laravel\laravelproject>npm run dev

C:\xampp\htdocs\laravel\laravelproject>php artisan serve
Starting Laravel development server: http://127.0.0.1:8000
Posted by ednalan at 12:02 AM . Under .

Related Post