Nuxt3のOption APIからComposition APIに移行する

Vue2 で使われていた Options API は、Vue3からできるようになったComposition API がでたことで直感的で分かりやすくなったことで、アップグレードのタイミングで移行したい人が多くいると思います。(Vue2でもComposition APIがつかえるみたいですが)

ここでは移行するコツをご紹介していこうかなと思います。

Option APIとComposition APIの違い

Vue コンポーネントの記述スタイルを指します。 目的は同じですが、書き方・設計思想・拡張性に違いがあります。

# Option APIでの記述
<script lang="ts">
export default defineNuxtComponent({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
})
</script>

# Composition APIでの記述
<script lang="ts" setup>
import { ref } from 'vue';

const count = ref(0);
const increment = () => {
  count.value++;
};
</script>

<script setup>にて直接setupの中に記述していくのが特徴です。 data は ref と対応する記述が変わってコンパイル時に変換されるらしいです。 併用も可能ですが、できればプロジェクト単位で統一したいですよね。

自動マイグレーションツールは公式でもなさそうなので、自作している人もいますけど完璧ではなさそうな気はしています。

https://github.com/vuejs/composition-api-converter

各メソッドの対比表

単純置き換えだけでは不具合が起こる可能性があります。 Composition APIにすることで、コンポーザブルへのアクセスでエラーになったりもするので 例外処理などもしっかり確認していくといいでしょう。

参考: https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables

参考: https://nuxt.com/docs/api/composables/use-nuxt-app#runwithcontext

Nuxtインスタンスへのアクセス時にはrunWithContext()を使ったりするといいかなと思います。

const result = nuxtApp.runWithContext(() => functionWithContext())

まとめ

基本的にやれることは同じだと思っていますが、単純に置き換えるだけだと色々問題が起こるかなと思います。 自分も単純な置き換えだけでいけると思っていましたが、いざ変更すると色々と問題(エラー)も起こっていたので、しっかりと確認しつつ変更していきましょう。