Vue２系からVue3系へバージョンアップ

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

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


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

Vueのバージョンを確認するコマンド
```shell:tarminal
npm list vue
```

現在のバージョン
```shell:tarminal
/Users/Username/path/projectname
└── vue@2.6.12
```

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

### Vueのバージョン確認に関する補足
もしくはpackage.jsonファイルから確認することも可能。
``` 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自体のバージョンではないので注意。
```shell:tarminal
// VueではなくVue CLIのバージョン
vue -V
@vue/cli 4.1.1
```
またプロジェクトにインストールしている場合とグローバルにインストールしている場合でvueの確認方法が異なる。
```shell:tarminal
//　プロジェクトにインストールしているvueのバージョン
npm list vue

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

##### 参考
[意外と間違えるVue.jsのバージョン確認方法](https://qiita.com/Sinhalite/items/64731c0a84cadb516a24)

## Vue3の導入

### vueCLIのバージョンアップ
#### グローバルにインストールしているvue-cliのバージョンアップ
古いvue-cliを削除
```shell:tarminal
npm uninstall -g vue-cli
```
新しいvue-cliをインストール
```shell:tarminal
npm install -g @vue/cli
```
バージョン確認
```shell:tarminal
vue -V      
@vue/cli 5.0.8
```

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

```shell:tarminal
npm install @vue/cli
```
プロジェクトのpackage.jsonに書かれているバージョンがアップされていることを確認。
```json:package.json
"@vue/cli": "^5.0.8",
```

## Vueプロジェクトのアップデート
vueプロジェクトのディレクトリで以下コマンド
```shell:tarminal
$ vue add vue-next
```

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

```shell: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.`.」エラーは消えた。)
```shell: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」と依存してるっぽい。
```shell: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.
```

とりあえず両方アンスト
```shell:tarminal
npm uninstall @fortawesome/vue-fontawesome@0.1.10 --force
 npm uninstall vue-cli-plugin-vue-next --force
```
依存関係のエラーは消えたけど、nodeのバージョンが合ってないエラーでてる。
node 何のバージョンで開発してたっけな。。
```shell:tarminal
Error: error:0308010C:digital envelope routines::unsupported
```

nodeのバージョンをv14.15.3にしてもう一度実行！
次はビルドエラー＞＜
```shell: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のエラー<br>@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.
::v-deepのエラーは
```shell:tarminal
@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.
```
```scss:scss
//↓こう書いていたのを
::v-deep .style {...}
//↓こう書き直すと解消された
::v-deep(.style) {...}
```


```shell:tarminal
@vue/compiler-sfc] compileTemplate now requires the `id` option.`.
```
↑こっちのエラーは残ってるものの、一応この時点でnpm run serve でローカルサーバは立ち上がった。

### Vueが見つからないというエラー　<br>"export 'default' (imported as 'Vue') was not found in 'vue'
しかしここでもまたエラー
```shell: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)に書き換えたことで解消。
```js: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')
```
```js: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のバージョンアップ + 以下のように書き換えたところ解消された。
```json:package.json　書き換え前
"vue-router": "^3.2.0"
```
```json:package.json　書き換え後
"vue-router": "^4.0.15"
```

VueRouterのインポート部分と、VueRouterのv4では、「path: '*'」が使用できないようなのでそこも書き換える。
```console:*使ってた場合のコンソールエラー
vue-router.mjs:1326 Uncaught Error: Catch all routes ("*") must now be defined using a param with a custom regexp.
```

```js: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 
```
```js: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して無事ブラウザに表示が確認できた。　
![00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1263973/1e1d8399-a51c-f644-ec76-af7b9e1b9736.png)
しかしVueRouterの記述方法で以下のコンソールエラーが発生。
```console:console
vue-router.mjs:35 [Vue Router warn]: Discarded invalid param(s) "id" when navigating
```

routerのparamsを引き渡す必要がないので記載を削除したらエラーは解除された。
```vue:vue 書き換え前
<router-link :to="{name:worksItem.id , params:{id:worksItem.id}}">
```
```vue:vue 書き換え後
<router-link :to="{name:worksItem.id}">
```

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



## 参考

[Vue2系のプロダクトをVue3へアップデート](https://qiita.com/Syoitu/items/4d2d51189440a69abbac)

### 参考(エラー系)
[NuxtBridge導入してみた①　最初から15回も怒られたの巻](https://zenn.dev/mihorin1729/articles/21f0b44f9cbfc4)
[Vue warning: compileTemplate now requires the id option. #5629](https://github.com/parcel-bundler/parcel/issues/5629)
[Vue3 チュートリアル 5 VueRouterの導入](https://qiita.com/TakahiRoyte/items/231aa3ac3aacbe25ebeb)
[Vue Router: A Tutorial for Vue 3](https://www.vuemastery.com/blog/vue-router-a-tutorial-for-vue-3/)
[[Vue3] Vue Router v4で引っかかったところ](https://qiita.com/ynstkt/items/2628c48a8f314e90229e)
[Vue Routerのparamsの渡し方の変更点について](https://qiita.com/Engineer_Grotle/items/66d181309a779ce8a34a)
[Vue Router と Pinia を使った簡単なアプリの作成](https://www.webdesignleaves.com/pr/plugins/vue-basic-07.html)