Vue3+bootstrap-vueを試してみた

はじめに

既存のVue2プロジェクトをVue3に移行したいと考えているのですが、まだ移行ツールなどは無さそうです。

Vue.jsのサイトでは、「準備中なので重要なアプリはMigration Buildを待ってね」みたいなことが書かれています。
https://v3.vuejs.org/guide/migration/introduction.html#breaking-changes

We are still working on a dedicated Migration Build of Vue 3 with Vue 2 compatible behavior and runtime warnings of incompatible usage. If you are planning to migrate a non-trivial Vue 2 app, we strongly recommend waiting for the Migration Build for a smoother experience.

本当にバージョンをあげるのは、Migration Buildを待ってみるとして、
本記事では、既存のアプリケーションがbootstrap-vueを使用しているため、Vue3でbootstrap-vueをセットアップしてみて、動作するのかちょっと確認してみたいと思います。

Vue3 startup

まず、普通にVue3のプロジェクトをセットアップしてみます。

vue-cliの更新

削除して最新を取得

$ npm uninstall -g vue-cli
$ npm -g add @vue/cli

バージョンアップを確認

$ vue --version
@vue/cli 4.5.13

Quickstartを真似てプロジェクト作成

$ vue create hello-vue3

テンプレートそのままのこの時点では普通に起動しました。

bootstrap-vueの組み込み

とりあえず足してみる。

$ npm install bootstrap-vue bootstrap --save

main.jsを修正。

自動生成されたもの

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

bootstrapの記述を追加したもの

import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import BootstrapVue from 'bootstrap-vue'

createApp(App).use(BootstrapVue).mount('#app')

起動すると、popperjs/coreが無いというので、追加。

$ npm install --save @popperjs/core

再度起動すると、ブラウザは真っ白で、下記エラーが発生。
検索してみると、同様のエラーの情報がちらほら。

Uncaught TypeError: Cannot read property 'prototype' of undefined
    at eval (webpack-internal:///./node_modules/bootstrap-vue/esm/utils/config.js:20)
    at Module../node_modules/bootstrap-vue/esm/utils/config.js (chunk-vendors.js:3311)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (webpack-internal:///./node_modules/bootstrap-vue/esm/utils/props.js:13)
    at Module../node_modules/bootstrap-vue/esm/utils/props.js (chunk-vendors.js:3587)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (webpack-internal:///./node_modules/bootstrap-vue/esm/utils/model.js:6)
    at Module../node_modules/bootstrap-vue/esm/utils/model.js (chunk-vendors.js:3503)

コードをちょっとだけのぞいてみましたが、ここで落ちている模様

import { Vue } from '../vue';
import { DEFAULT_BREAKPOINT, PROP_NAME } from '../constants/config';
import { cloneDeep } from './clone-deep';
import { memoize } from './memoize'; // --- Constants ---

var VueProto = Vue.prototype; // --- Getter methods ---

Vue.prototypeはVue3では、app.config.globalPropertiesという新しいAPIで取得する必要があるみたいである。

bootstrap-vueのv2.21.0のChangeLogに下記の記載があったが、migrationができるようになったわけではなく、準備を進めているだけだった模様。

code enhancements for easier Vue 3 migration

遅ればせながら、githubのissueなどの情報を見てみたところ、v3, v4で対応予定とのこと。
v2系統のままでは動かなそうです。残念。