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