Vue2からVue3に移行する際の注意点

Vue2からVue3に移行中のプロジェクトを進めていく中で、つまづきやすいところ、気をつけたいところをこの記事にまとめます。

この記事の想定読者

• Vue2経験者
• Vue2からVue3に移行を考えている、または移行中の方

inputイベントが機能しない

v-modelとinputイベントを併用している箇所で見つけました。下記のようなコードでは @input が機能しませんでした。

<!-- @input Not Working -->
v-autocomplete(
  v-model="value"
  clearable
  :items="items"
  @input="onChange"
)

Githubのissueを参考にしました。
以下のように @input を @update:model-value(@update:modelValueでも可) に変更することで機能しました。

v-autocomplete(
  v-model="value"
  clearable
  :items="items"
  @update:model-value="onChange"
)

公式のドキュメントにもそれらしいことが一応記載されていますが、わかりにくいように思います。（個人的には@inputでも動作してほしい）

eslintの設定

Vue3の移行に伴い、JavaScriptからTypeScriptにも移行する方がいらっしゃると思います。その際には、eslintの設定をVue3+TypeScript用に変更する必要があります。自分は以下のような構成にしています。
rules はお好みで設定を変更してください。Vue3でComposition APIを利用する場合は、@typescript-eslint/no-unused-vars をoffにしておくと大量のwarningに悩まされることがなくなります。

構成

1. Vue3（Nuxt3）
2. TypeScript
3. pug
4. prettier

RequiremenTypeScript

yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue @vue/eslint-config-prettier eslint typescript prettier

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/base",
    "@vue/prettier",
  ],
  overrides: [],
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["vue", "@typescript-eslint", "pug"],
  rules: {
    "@typescript-eslint/no-unused-vars": "off",
    "vue/multi-word-component-names": "off",
  },
};