Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@Maro1027

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

Last updated at Posted at 2023-08-07

今回の記事について

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して無事ブラウザに表示が確認できた。　
00.png
しかし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 を使った簡単なアプリの作成

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?