今回の記事について

Vue２系は2023年12月にサポートが終了するとのことで、Vue２系から3系へバージョンアップしたのでその備忘録。

この記事でのアップデートはスムーズにバージョンアップできてません。
エラーのオンパレードです。
どんなエラーが出てどう解消したか残してます。誰かのエラー解消に少しでも役に立ったら幸いです。

現在使用しているプロジェクトのvueのバージョン確認

Vueのバージョンを確認するコマンド

tarminal

npm list vue

現在のバージョン

tarminal

/Users/Username/path/projectname
└── vue@2.6.12

ということで今回はvue@2.6.12から最新のvue@3.3.4にバージョンアップしたいと思います。

Vueのバージョン確認に関する補足

もしくはpackage.jsonファイルから確認することも可能。

package.json

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-regular-svg-icons": "^5.14.0",
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "@fortawesome/vue-fontawesome": "^0.1.10",
    "core-js": "^3.6.5",
    "reset.css": "^2.0.2",
    "sass-loader": "^8.0.2",
    "vue": "^2.6.11", // ←ここ
    "vue-router": "^3.2.0"
},

ちなみにターミナルで「Vue -V」コマンドで出てくるバージョンは「Vue CLI」のバージョンのためvue自体のバージョンではないので注意。

tarminal

// VueではなくVue CLIのバージョン
vue -V
@vue/cli 4.1.1

またプロジェクトにインストールしている場合とグローバルにインストールしている場合でvueの確認方法が異なる。

tarminal

//　プロジェクトにインストールしているvueのバージョン
npm list vue

//　グローバルにインストールしているvueのバージョン
npm list -g vue

参考

意外と間違えるVue.jsのバージョン確認方法

Vue3の導入

vueCLIのバージョンアップ

グローバルにインストールしているvue-cliのバージョンアップ

古いvue-cliを削除

tarminal

npm uninstall -g vue-cli

新しいvue-cliをインストール

tarminal

npm install -g @vue/cli

バージョン確認

tarminal

vue -V      
@vue/cli 5.0.8

今回はグローバルではなくプロジェクトでCLIインストールしていたのでプロジェクトのvue cliもバージョンアップ

tarminal

npm install @vue/cli

プロジェクトのpackage.jsonに書かれているバージョンがアップされていることを確認。

package.json

"@vue/cli": "^5.0.8",

Vueプロジェクトのアップデート

vueプロジェクトのディレクトリで以下コマンド

tarminal

$ vue add vue-next

記事作成時点でのvueの最新バージョンは安定版で v3.3.4 が出ているのに 3.0.0-beta.1 ベータ版が入っている模様。。「eslint-plugin-vue」とコンフリクトもしてるっぽい。

tarminal

🚀  Invoking generator for vue-cli-plugin-vue-next...
 WARN  conflicting versions for project dependency "vue":
       
       - ^2.6.11 injected by generator "undefined"
       - ^3.0.0-beta.1 injected by generator "vue-cli-plugin-vue-next"
       
       Using newer version (^3.0.0-beta.1), but this may cause build errors.
 WARN  conflicting versions for project dependency "eslint-plugin-vue":
       
       - ^6.2.2 injected by generator "undefined"
       - ^7.0.0-alpha.0 injected by generator "vue-cli-plugin-vue-next"
       
       Using newer version (^7.0.0-alpha.0), but this may cause build errors.
📦  Installing additional dependencies...

とりあえず一旦npm run serveしてみか。
(※なぜベータ版で放置した。後ほど実行するが、package.jsonを直接書き換えて "vue": "^3.3.4",をダウンロードしたところ、後述の「@vue/compiler-sfc] compileTemplate now requires the id option.`.」エラーは消えた。)

tarminal

npm run serve

> portfolio@0.2.0 serve
> vue-cli-service serve

Vue CLI now supports Vue 3 by default.
vue-cli-plugin-vue-next is no longer needed, please remove it from the dependencies.

Vue3ではデフォルトでVue-CLIサポートしてるから「vue-cli-plugin-vue-next」いらないって言われた。
素直にアンインストール試すもエラー。「fontawesome」と依存してるっぽい。

tarminal

npm uninstall vue-cli-plugin-vue-next
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @fortawesome/vue-fontawesome@0.1.10
npm ERR! Found: vue@3.3.4
npm ERR! node_modules/vue
npm ERR!   peerOptional vue@"^2 || ^3.0.0-0" from @vue/babel-preset-app@4.5.4
npm ERR!   node_modules/@vue/babel-preset-app
npm ERR!     @vue/babel-preset-app@"^4.5.4" from @vue/cli-plugin-babel@4.5.4
npm ERR!     node_modules/@vue/cli-plugin-babel
npm ERR!       dev @vue/cli-plugin-babel@"^4.5.0" from the root project
npm ERR!   peer vue@"3.3.4" from @vue/server-renderer@3.3.4
npm ERR!   node_modules/@vue/server-renderer
npm ERR!     @vue/server-renderer@"3.3.4" from vue@3.3.4
npm ERR!   2 more (vue-cli-plugin-vue-next, the root project)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"~2" from @fortawesome/vue-fontawesome@0.1.10
npm ERR! node_modules/@fortawesome/vue-fontawesome
npm ERR!   @fortawesome/vue-fontawesome@"^0.1.10" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: vue@2.7.14
npm ERR! node_modules/vue
npm ERR!   peer vue@"~2" from @fortawesome/vue-fontawesome@0.1.10
npm ERR!   node_modules/@fortawesome/vue-fontawesome
npm ERR!     @fortawesome/vue-fontawesome@"^0.1.10" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

とりあえず両方アンスト

tarminal

npm uninstall @fortawesome/vue-fontawesome@0.1.10 --force
 npm uninstall vue-cli-plugin-vue-next --force

依存関係のエラーは消えたけど、nodeのバージョンが合ってないエラーでてる。
node 何のバージョンで開発してたっけな。。

tarminal

Error: error:0308010C:digital envelope routines::unsupported

nodeのバージョンをv14.15.3にしてもう一度実行！
次はビルドエラー＞＜

tarminal

@vue/compiler-sfc] compileTemplate now requires the `id` option.`.
@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

::v-deepのエラー
@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep() instead.

::v-deepのエラーは

tarminal

@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

scss

//↓こう書いていたのを
::v-deep .style {...}
//↓こう書き直すと解消された
::v-deep(.style) {...}

tarminal

@vue/compiler-sfc] compileTemplate now requires the `id` option.`.

↑こっちのエラーは残ってるものの、一応この時点でnpm run serve でローカルサーバは立ち上がった。

Vueが見つからないというエラー　
"export 'default' (imported as 'Vue') was not found in 'vue'

しかしここでもまたエラー

tarminal

 WARNING  Compiled with 3 warnings                                                                                                                                 22:27:42

 warning  in ./src/main.js

"export 'default' (imported as 'Vue') was not found in 'vue'

 warning  in ./src/main.js

"export 'default' (imported as 'Vue') was not found in 'vue'

 warning  in ./src/router/index.js

"export 'default' (imported as 'Vue') was not found in 'vue'

importのVueを削除してVue.〇〇となっている部分をcreateApp(App)に書き換えたことで解消。

main.js 書き換え前

import Vue, { createApp } from 'vue';

Vue.use(VueAnalytics, {
  id: 'UA-xxxxxxxx-x',
  router
})

Vue.component('font-awesome-icon', FontAwesomeIcon)

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

main.js 書き換え後

import { createApp } from 'vue';

createApp(App).use(VueAnalytics, {
  id: 'UA-xxxxxxxx-x',
  router
})

createApp(App).component('font-awesome-icon', FontAwesomeIcon)

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

Vue Routerバージョンアップと書き換え

index.jsの方はvue2からvue3でrouterの使い方が変わったのか、vue routerのバージョンアップ + 以下のように書き換えたところ解消された。

package.json　書き換え前

"vue-router": "^3.2.0"

package.json　書き換え後

"vue-router": "^4.0.15"

VueRouterのインポート部分と、VueRouterのv4では、「path: '*'」が使用できないようなのでそこも書き換える。

*使ってた場合のコンソールエラー

vue-router.mjs:1326 Uncaught Error: Catch all routes ("*") must now be defined using a param with a custom regexp.

index.js 書き換え前

import Vue from 'vue'
import VueRouter from 'vue-router'

const routes = [
    {
        省略
    },
    {  
        path: '*',  
        redirect: { path: '/' },  
    },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

Vue.use(VueRouter)

export default router

index.js 書き換え後

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
    {
        省略
    },
    {  
        path: '/:pathMatch(.*)*',
        redirect: 'signin',
    },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

この時点でnpm run serveして無事ブラウザに表示が確認できた。　

しかしVueRouterの記述方法で以下のコンソールエラーが発生。

console

vue-router.mjs:35 [Vue Router warn]: Discarded invalid param(s) "id" when navigating

routerのparamsを引き渡す必要がないので記載を削除したらエラーは解除された。

vue 書き換え前

<router-link :to="{name:worksItem.id , params:{id:worksItem.id}}">

vue 書き換え後

<router-link :to="{name:worksItem.id}">

以上、vueのバージョンアップデートとエラー解除までの流れでした。

参考

Vue2系のプロダクトをVue3へアップデート

参考(エラー系)

NuxtBridge導入してみた①　最初から15回も怒られたの巻
 Vue warning: compileTemplate now requires the id option. #5629
Vue3 チュートリアル 5 VueRouterの導入
 Vue Router: A Tutorial for Vue 3
[Vue3] Vue Router v4で引っかかったところ
 Vue Routerのparamsの渡し方の変更点について
 Vue Router と Pinia を使った簡単なアプリの作成