Inertia.jsを使用したページネーションの実装方法

ページネーションのデータ準備まず、ページネーションに必要なデータを準備する必要があります。一般的に、ページごとのデータアイテムの配列や、現在のページ番号、総データ数などが含まれます。
Inertia.jsを使用したページネーションの実装 Inertia.jsでは、ページネーションのリンクを作成するためにinertia-linkコンポーネントを使用します。以下は、基本的なページネーションの実装例です。

<template>
  <div>
    <ul>
      <li v-for="page in pagination.pages" :key="page">
        <inertia-link :href="route(routeName, { page: page })" :preserve-state="true">
          {{ page }}
        </inertia-link>
      </li>
    </ul>
  </div>
</template>
<script>
import { usePage } from '@inertiajs/inertia-vue3';
export default {
  setup() {
    const { route, routeName, props } = usePage();
    const { pagination } = props;
    return {
      route,
      routeName,
      pagination,
    };
  },
};
</script>

上記のコードでは、paginationオブジェクトから各ページへのリンクを作成しています。route関数を使用して、適切なルート名とページ番号を組み合わせることで、ページネーションリンクのURLを生成します。

ページネーションのデザインとカスタマイズ上記の例では、ページネーションリンクをリストアイテムとしてレンダリングしていますが、デザインやカスタマイズはプロジェクトの要件に応じて自由に行うことができます。CSSやフレームワークのクラスを適用して、デザインを変更することができます。

以上がInertia.jsを使用したページネーションの実装方法の例です。この方法を利用することで、クライアントサイドでのスムーズなページ遷移とパフォーマンスの向上を実現することができます。