[Nuxt3] Nuxt3의 Options API (asyncData, head, defineNuxtComponent)

Nuxt3의 Stable 버전은 2022년 11월 16일에 공식적으로 발표되었다.
Nuxt2를 사용하던 개발자로서 Vue3기반의 Composition API보다 Options API를 사용하는게 더 편해 사용하려 했지만,
기존에 사용하던 방식과 조금 달라 어려움을 겪었고, Nuxt3의 출시일이 길지않아 정보가 많이 존재하지 않았다.
그래서 Nuxt3에서 Options API를 어떻게 사용해야하는지에 대해 작성하려한다.

 

defineNuxtComponent

defineNuxtComponent는 Options API를 사용하기 위해 Vue 구성 요소를 정의하기 위한 Helper 함수다. 
이 함수를 사용하면 asyncData와 head 메서드를 사용할 수 있게 도와준다. 그래서 어떻게 사용하면 되는지는 아래 예제를 보자.

<script>
export default defineNuxtComponent({
  async asyncData() { 
    return {
      data: {
        greetings: 'hello world!'
      }
    }
  },
  head(nuxtApp) {
    return {
      title: 'My site'
    }
  },
})
</script>

위와 같이 defineNuxtComponent를 선언하고 그 안에서 Options API를 어려움 없이 사용이 가능하게 된다.

만약 defineNuxtComponent를 선언하지 않는다면 Nuxt2에서 사용하던 것처럼 asyncData가 동작하지 않을 것이다.

Nuxt2 개발자들은 이 내용을 참고하여 Options API를 헤매지 않고 사용했으면 좋겠는 마음이다.

 

참고 https://nuxt.com/docs/api/utils/define-nuxt-component