Laravel10 + Inertia + Vue3の環境でPaginationを実装した際の記録と解説です。
この記事のゴール
ネット上で関連記事は多数見つかるのですが、「表示だけして終わり!」といった中途半端な記事が多く、まともに動くものが少なく結構ハマったので記事にしました。
本記事では、出力調整と動作確認までしっかり行います。
前提条件
- Ubuntu上で作業しています
- PHP8.1以降インストール済
- Composerインストール済
これからやること
- 環境構築(Laravel10 + Inertia + Vue3)
- マイグレーション
- コントローラー作成
- ルーティング
- Vue3 Paginationコンポーネント作成
- Inertiaテンプレート作成
- WEBサービス起動
- ブラウザ確認
環境構築(Laravel10 + Inertia + Vue3)
Laravel10 + Inertia + Vue3の環境構築の選択肢はいくつかありますが、ここではJetstreamを選択していきます。
作業フォルダ内にLaravelの新規プロジェクト「pagination-inertia-vue3」を作成します。
composer create-project laravel/laravel:^10 pagination-inertia-vue3
プロジェクトフォルダへ入ってからJetstreamをインストールします。
cd pagination-inertia-vue3/
composer require laravel/jetstream
Inertiaを使えるようにします。
php artisan jetstream:install inertia
マイグレーション
プロジェクトトップにある「.env」を編集・保存します。
DB_CONNECTION=sqlite
に修正して、他のDB項目をすべて削除します。
「database/seeders/DatabaseSeeder.php」を編集・保存します。
// \App\Models\User::factory(10)->create();
の箇所を修正します。
\App\Models\User::factory(150)->create();
シードオプション付きでマイグレーションを実行します。
php artisan migrate --seed
「Would you like to create it?」と訊かれるので、
[←]キーを押して「Yes」を選択し、[Enter」キーで確定します。
ユーザーレコードが150件作成されました。
コントローラー作成
次のコマンドを実行します。
php artisan make:controller UsersController
「app/Http/Controllers/UsersController.php」を編集・保存します。
<?php
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Inertia\Inertia;
use App\Models\User;
class UsersController extends Controller
{
public function index(Request $request)
{
return Inertia::render('UsersList', [
'usersList' => User::paginate(10),
]);
}
}
ルーティング
「routes/web.php」に追記します。
Route::get('/users', [\App\Http\Controllers\UsersController::class, 'index']);
完成形は次のような感じです。
<?php
use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
Route::get('/', function () {
return Inertia::render('Welcome', [
'canLogin' => Route::has('login'),
'canRegister' => Route::has('register'),
'laravelVersion' => Application::VERSION,
'phpVersion' => PHP_VERSION,
]);
});
Route::middleware([
'auth:sanctum',
config('jetstream.auth_session'),
'verified',
])->group(function () {
Route::get('/dashboard', function () {
return Inertia::render('Dashboard');
})->name('dashboard');
});
Route::get('/users', [\App\Http\Controllers\UsersController::class, 'index']);
Vue3 Paginationコンポーネント作成
「resources/js/Components/」フォルダ内に新しいファイル「Pagination.vue」を作成します。
<template>
<div v-if="links.length > 3">
<div class="flex flex-wrap -mb-1">
<template v-for="(link, p) in links" :key="p">
<div v-if="link.url === null"
class="mr-1 mb-1 px-4 py-3 text-sm leading-4 text-gray-400 border rounded"
v-html="link.label"
/>
<Link v-else
class="mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-yellow-400 focus:border-indigo-500 focus:text-indigo-500"
:class="{ 'bg-blue-700 text-white hover:bg-blue-600': link.active }"
:href="link.url"
v-html="link.label"
/>
</template>
</div>
</div>
</template>
<script>
import { Link } from "@inertiajs/vue3";
export default {
components: {
Link,
},
props: {
links: Array
}
}
</script>
Inertiaテンプレート作成
「resources/js/Pages/」フォルダに新しいファイル「UsersList.vue」を作成します。
<template>
<layout title="Users">
<div class="container mt-5">
<Pagination class="mt-6" :links="usersList.links" />
<ul>
<li v-for="item in usersList.data"
:key="item.id"
class="p-2 hover:bg-green-200 rounded-lg"
>
{{ item.id }}: {{ item.name }} <{{ item.email }}>
</li>
</ul>
</div>
</layout>
</template>
<script>
import Pagination from '@/Components/Pagination.vue'
export default {
components: {
Pagination
},
props: {
usersList: Object,
}
}
</script>
WEBサービス起動
Viteを起動します。
npm run dev
別のターミナルでLaravelのWEBサービスを起動します。
php artisan serve
ブラウザ確認
WEBブラウザで
http://127.0.0.1:8000/users
にアクセスします。
ページネーションとユーザーリストが表示されました。
デフォルトでTailwind CSSが適用されています。
ページリンクをクリックした際のユーザーリストの表示切替もできています。
今回はここまでです。お疲れさまでした。
続きはこちらです。
コメント