背景
変更点
どのように効率よく対応するか

1. 背景

Nuxt2を業務で使用しています。年内にサポート切れするということでNuxt3に移行する必要がある為です。
Vue2は2024年3月までサポートされるということですが。

2. 変更点

2.1 Vue.extendの削除

defineComponentで書き換えます。

import Vue from "vue";
export default Vue.extend({

↓
vue3

import { defineComponent } from "vue";
export default defineComponent({

2.2 ESLint の設定

ESLint の設定ファイルにいる extends の plugin:vue/〇〇を plugin:vue/vue3-〇〇に変更する必要があります。

.eslintrc.js

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    'plugin:vue/vue3-recommended',
    // 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  }
}

2.3 /deep/は廃止、>>> は警告出る、 :deep(.selector) に変更

outer.vue

// エイリアスなのでどちらでもいい
/deep/ .inner-text {
    color: blue;
}

>>> .inner-text {
    color: blue;
}

↓

outer.vue

:deep(.inner-text) {
    color: blue;
}

2.4 Filter、テンプレートフィルタ構文の廃止

https://v3-migration.vuejs.org/ja/breaking-changes/filters.html
vue2

sample.vue

<template>
  <h1>Bank Account Balance</h1>
  <p>{{ accountBalance | currencyUSD }}</p>
</template>

<script>
  export default {
    props: {
      accountBalance: {
        type: Number,
        required: true
      }
    },
    filters: {
      currencyUSD(value) {
        return '$' + value
      }
    }
  }
</script>

↓
vue3

sample.vue

<template>
  <h1>Bank Account Balance</h1>
  <p>{{ accountInUSD }}</p>
</template>

<script>
  export default {
    props: {
      accountBalance: {
        type: Number,
        required: true
      }
    },
    computed: {
      accountInUSD() {
        return '$' + this.accountBalance
      }
    }
  }
</script>

Vue.Filterの書き換え
普通の関数に書き換える感じです。

Vue.filter('longformat', function (t) { return (!!t) ? '-' : moment(t).format('YYYY年MM月DD日(dddd)') });

↓

export function longformat (t) { return (!!t) ? '-' : moment(t).format('YYYY年MM月DD日(dddd)') };

2.5 .sync 修飾子を v-model に書き換え

2.6 Vue.deleteの廃止

2.7 slot="header"が非推奨に

  <template slot="header">
    <h1>ヘッダー</h1>
  </template>

↓
vue3

  <template v-slot:header>
    <h1>ヘッダー</h1>
  </template>

3. どのように効率よく対応するか

以下記事を見つけました。
eslint-plugin-vue を使用して継続的に Vue3 移行する

eslint-plugin-vueを使うことで半分以上の変更点を自動で修正してくれるそうです。

Vue2からVue3の変更点を整理する

1. 背景

2. 変更点

2.1 Vue.extendの削除

2.2 ESLint の設定

2.3 /deep/は廃止、>>> は警告出る、 :deep(.selector) に変更

2.4 Filter、テンプレートフィルタ構文の廃止

2.5 .sync 修飾子を v-model に書き換え

2.6 Vue.deleteの廃止

2.7 slot="header"が非推奨に

3. どのように効率よく対応するか

参考