【Laravel10 + Inertia + Vue3】Paginationを実装する

Laravel10 + Inertia + Vue3の環境でPaginationを実装した際の記録と解説です。

この記事のゴール
前提条件
これからやること
環境構築（Laravel10 + Inertia + Vue3）
マイグレーション
コントローラー作成
ルーティング
Vue3 Paginationコンポーネント作成
Inertiaテンプレート作成
WEBサービス起動
ブラウザ確認
参考サイト

この記事のゴール

ネット上で関連記事は多数見つかるのですが、「表示だけして終わり！」といった中途半端な記事が多く、まともに動くものが少なく結構ハマったので記事にしました。

本記事では、出力調整と動作確認までしっかり行います。

前提条件

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 }} &lt;{{ item.email }}&gt;
            </li>
        </ul>
      </div>
    </layout>
  </template>
    
  <script>
  import Pagination from '@/Components/Pagination.vue'
    
  export default {
    components: {
      Pagination
    },
    props: {
      usersList: Object,
    }
  }
  </script>