Nuxt.jsでBootstrap 5のページネーションを実装する方法

1. 必要なパッケージのインストール: まず、Nuxt.jsプロジェクトをセットアップしましょう。ターミナルで以下のコマンドを実行して、Nuxt.jsとBootstrap 5の関連パッケージをインストールします。

npm install nuxt bootstrap

2. Bootstrapの設定: Nuxt.jsのnuxt.config.jsファイルを開き、以下のようにBootstrapのCSSとJavaScriptをインポートします。

module.exports = {
  // ...
  css: [
    'bootstrap/dist/css/bootstrap.css'
  ],
  plugins: [
    '~/plugins/bootstrap.js'
  ],
  // ...
}

3. ページネーションの実装: ページネーションコンポーネントを作成し、必要なプロパティとメソッドを追加します。以下は、簡単な例です。

<template>
  <div>
    <ul class="pagination">
      <li class="page-item" :class="{ disabled: currentPage === 1 }">
        <a class="page-link" @click="goToPage(currentPage - 1)">前へ</a>
      </li>
      <li class="page-item" v-for="pageNumber in totalPages" :key="pageNumber" :class="{ active: pageNumber === currentPage }">
        <a class="page-link" @click="goToPage(pageNumber)">{{ pageNumber }}</a>
      </li>
      <li class="page-item" :class="{ disabled: currentPage === totalPages }">
        <a class="page-link" @click="goToPage(currentPage + 1)">次へ</a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1,
      totalPages: 5 // 仮の値です。実際のトータルページ数に置き換えてください。
    };
  },
  methods: {
    goToPage(pageNumber) {
      if (pageNumber >= 1 && pageNumber <= this.totalPages) {
        this.currentPage = pageNumber;
        // ページの変更ロジックを実装することができます
        // 例えば、APIリクエストを行って新しいページのデータを取得するなど
      }
    }
  }
};
</script>

これで、Nuxt.jsとBootstrap 5を使用してページネーションを実装する準備が整いました。上記のコードは基本的な例ですので、必要に応じてカスタマイズしてください。