1.Upgrade Vue CLI to the latest version

vue upgrade

2.Updating your package.json file

install below packages

• “vue”: “^3.1.0-0”
• “@vue/compat”: “^3.1.0-0”
• “@vue/compiler-sfc”: “^3.1.0-0”

remove below packages

• “vue”: “^2.6.11”
• “vue-template-compiler”: “^2.6.11”

"dependencies": {
    "vue": "^3.1.0-0", // ADD
    "@vue/compat": "^3.1.0-0" // ADD
    "vue": "^2.6.11", // REMOVE
    ...
},
"devDependencies": {
    "@vue/compiler-sfc": "^3.1.0-0" // ADD
    "vue-template-compiler": "^2.6.11" // REMOVE
    ...
}

npm install

3.Create a vue.config.js file to set up some compiler options:

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('vue', '@vue/compat')

    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        return {
          ...options,
          compilerOptions: {
            compatConfig: {
              MODE: 2
            }
          }
        }
      })
    }
}

4.And then to restart the development server:

npm run serve

5.Fix errors

6.Upgrade Vuex and Vue-Router

"vue-router": "^4.0.0",
"vuex": "^4.0.0"

Update Vuex file

import { createStore } from 'vuex'
import modules from './modules'
const store = createStore({ modules, strict: false })

export default store

Update Vue-Router file

import routes from './routes'
import { createRouter, createWebHashHistory } from 'vue-router'

const router = new createRouter({
    routes,
    history: createWebHashHistory(),
});

export default router

7.Replace bootstrap-vue with bootstrap-vue-3, because bootstrap-vue is not yet ready for Vue3

npm install --save bootstrap bootstrap-vue-3 @popperjs/core

import {createApp} from 'vue'
import BootstrapVue3 from 'bootstrap-vue-3'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'

const app = createApp(App)
app.use(BootstrapVue3)
app.mount('#app')

參考:

1. bootstrap-vue-3
2. installation-vue-js
3. how-to-use-vue-3-add-plugin-boostrap-vue