bootstrap-vueでの設定エラー

エラーの原因

Vue.jsの開発でBootstrap-vueを使おうとしたときに下記のようなエラーが出てしまう場合があったので備忘録として残しておく。

No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"

    node_modules/bootstrap-vue/esm/vue.js:13:7:
      13 │ import Vue from 'vue';

結論から言ってしまうと適用しようとしたBootstrap-vueのバージョンが使用しているVue.jsに対応していないということ。
私が使用している環境はこんな感じ、コマンドは npm list vue

├─┬ @vitejs/plugin-vue@4.3.4
│ └── vue@3.3.4 deduped
├─┬ bootstrap-vue@2.23.1
│ └─┬ portal-vue@2.1.7
│   └── vue@2.7.14
└─┬ vue@3.3.4
  └─┬ @vue/server-renderer@3.3.4
    └── vue@3.3.4 deduped

Vue.jsのバージョンは3.3.4 でも現在（執筆時点）のBootstrap-vueでは３以上は対応していない。
なのでバージョンが対応外なのでエラーが出ているということ。
対応バージョンはこちらを確認

対策１ バージョンを変更する

対策はシンプル、Vue.jsが新しすぎて使えないならバージョンを戻すという方法
次のコマンドで指定のバージョンに変更できる。

npm install vue@<バージョン>

対策２ Bootstrap-vueを使わない

対策というか回避策、Bootstrap-vueを使うためにVue.jsを戻るのは違うかなーという人は普通のBootstrapで頑張るというのも手段の一つ、Bootstrapのほうは使えるので。