Laravel10 + Vuetify3の環境でv-paginationコンポーネントを使ってPaginationを実装していきます。
Vuetify3公式のドキュメントが不親切過ぎて、かなりハマりました。
が、使えるようになれば簡単です。
前提条件
- Ubuntu上で作業しています
- PHP8.1以降インストール済
- Composer v2以降インストール済
環境構築
まずはLaravelプロジェクトを作成します。
composer create-project laravel/laravel:^10 pagination-vuetify3
「pagination-vuetify3」フォルダに入ってから
viteプラグインのvue3をインストールします。
cd pagination-vuetify3
npm install @vitejs/plugin-vue --save-dev
プロジェクトトップにある「vite.config.js」にvueの設定を追記します。
import vue from "@vitejs/plugin-vue" vue(),
Vuetify3をインストールします。
npm i vuetify
「Material Design Icons」をインストールします。
npm install @mdi/font -D
「resources/js/app.js」にVue3とvuetify3の設定を追記します。
追記する内容：
import { createApp } from 'vue'
import App from './App.vue'
// Vuetify
import 'vuetify/styles'
import '@mdi/font/css/materialdesignicons.css'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify = createVuetify({
components,
directives,
})
createApp(App).use(vuetify).mount('#app')同じフォルダ内に「App.vue」ファイルを作成して編集・保存します。
<template>
<v-pagination
:length="15"
>
</v-pagination>
</template>ビューファイルを作成します。
php artisan make:view users
「resources/views/users.blade.php」を編集・保存します。
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Vite Vue</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div id="app"></div>
</body>
</html>
「routes/web.php」を開いてルーティングを追記します。
Route::get('/users', function () {
return view('users');
});
WEBサービスを起動して一度表示確認してみましょう。
まずはviteを起動します。
npm run dev
別のターミナルでlaravelのWEBサービスを起動します。
php artisan serve
WEBブラウザで「http://127.0.0.1:8000/users」にアクセスします。
ページネーションが表示されました。
ページ切替はサクサク快適に動きます。
マイグレーション
プロジェクトトップにある「.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
ユーザーレコードが150件作成されました。
APIコントローラー作成
API用コントローラーを作成します。
php artisan make:controller Api/UsersController
「app/Http/Controllers/Api/UsersController.php」を編集・保存します。
<?php
namespace App\Http\Controllers\Api;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\User;
class UsersController extends Controller
{
public function index(Request $request)
{
$users = User::paginate(10);
$status = 200;
$message = 'Retrieving Users Succeeded.';
return [
'status' => $status,
'message' => $message,
'users' => $users,
];
}
}ルーティング(API)
「routes/api.php」に追記します。
Route::get('/users', [\App\Http\Controllers\Api\UsersController::class, 'index']);
ブラウザ確認(API)
WEBブラウザで
http://127.0.0.1:8000/api/usersにアクセスします。
ユーザーデータのページネーションの結果がJSON形式で表示されています。
Vueコンポーネント編集
先程作成したApp.vueでAPIからJSONを取得し、
ページリンクをクリックした際に
ユーザー一覧を表示切替できるようにしていきます。
「resources/js/App.vue」を編集・保存します。
<template>
<div class="flex justify-start">
<v-pagination
v-model="page"
:length="length"
:total-visible="6"
:size="32"
:color="'blue-accent-4'"
:active-color="'blue-darken-4'"
@click = "fetchUsers"
></v-pagination>
</div>
<ul>
<li
v-for="user in users"
:key="user.id"
class="px-3 py-2 rounded-lg hover:bg-green-200"
>
{{ user.id }}: {{ user.name }} <{{ user.email }}>
</li>
</ul>
</template>
<script>
export default {
data () {
return {
page: 1,
length: 1,
users: [],
apiBase: location.protocol + '//' + location.host + '/api/users',
}
},
methods: {
apiUrl () {
return this.apiBase + '?page=' + this.page;
},
async fetchUsers () {
const url = this.apiUrl();
const res = await fetch(url);
const json = await res.json();
this.users = json.users.data;
this.length = json.users.last_page;
},
},
mounted () {
this.fetchUsers();
}
}
</script>
v-paginationのpropsは公式を参照してください。
不親切過ぎて、はじめは使い方がサッパリわかりませんでした。
使い方の具体例ぐらい載せるべきだと筆者は思います。
色を指定する際のカラーコードはこちらを参照してください。
v-paginationは単なる表示パーツなので、
ページ切替時の処理は自前で実装する必要があります。
「@click」で実装する処理の関数名を指定します。
「v-model」でpage変数が双方向バインディングされているので
「this.page」でページ指定をしてAPIからデータを取得し、
取得したデータを表示します。
Bladeテンプレート編集
Tailwind CSSのCDN版を適用していきます。
「resources/views/user.blade.php」に追記します。
<script src="https://cdn.tailwindcss.com"></script>
ブラウザ確認
WEBブラウザを再読み込みします。
ページネーションがサイズ縮小され、色も反映されました。
ユーザーリストもTailwind CSSのスタイル反映された状態で
表示されています。
ページ切替もしっかり反映されています。
今回はここまでです。お疲れさまでした。
続きはこちらです。
コメント