Nuxt3にbootstrap-vueをインストールする

Nuxt3とbootstrap-vueの組み合わせについては情報が少なく、ほぼ1日無駄にしてしまったのでメモしておきます

詳細はこちらのGithub Issueをご確認ください

引っかかったポイント

Nuxt + bootstrap-vueについて記述している方は多くいるのですが以下の点で色々なエラーが出てしまい、いろんな情報を組み合わせてやっと動くようになりました

bootstrap.min.cssをnuxt.config.tsに記述すればOKとしている記事を見かけますがこれだけだと、bootstrap.min.jsが動きません

bootstrap-vueをyarnでインストールする説明をよく見ますが、Nuxt3では起動時にエラーになるため、bootstrap-vue-3をインストールする必要があります

bootstrapの一部はクライアントサイドで動くので、mode:'client'でプラグイン設定するように記載しているページを見かけますが、Nuxt3では代わりにpluginsフォルダに作るファイルに'client'をつけてtemplate内でOnlyClientタグを利用します

インストール方法

Boostrap-vueのインストール

bootstrap及びbootstrap-vueを対象プロジェクトにインストールします

yarn add bootstrap bootstrap-vue-3

nuxt.config.tsの編集

以下のようにcssの部分に２行追加します

nuxt.config.ts

import { defineNuxtConfig } from "nuxt3"

export default defineNuxtConfig({
  css: [
    "bootstrap/dist/css/bootstrap.css",
    "bootstrap-vue-3/dist/bootstrap-vue-3.css",
  ],
})

pluginsフォルダにbootstrap.client.tsを追加

pluginsフォルダにbootstrap.client.tsという名前のファイルを作成して以下のように記述します

plugins/bootstrap.client.ts

import BootstrapVue3 from "bootstrap-vue-3"

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(BootstrapVue3)
})

利用するコンポーネントによってOnlyClientタグを使う

動的に表示が変わるコンポーネントではOnlyClientタグを使う必要があります
参考にしたGithub Issueでは例としてアコーディオンの記述の仕方が書かれていました

app.vue

<template>
  <div>
    <ClientOnly>
      <b-accordion>
        <b-accordion-item title="Accordion Item #1" visible>
          Accordion 1
        </b-accordion-item>
        <b-accordion-item title="Accordion Item #2">
          Accordion 2
        </b-accordion-item>
        <b-accordion-item title="Accordion Item #3">
          Accordion 3
        </b-accordion-item>
      </b-accordion>
    </ClientOnly>
  </div>
</template>

まとめ

Nuxt3はリリース後間もないので、まだまだ情報が少ないですね
今後に期待です