defineNuxtComponent

defineNuxtComponent()는 옵션 API를 사용하여 유형이 안전한 구성 요소를 정의하기 위한 헬퍼 함수이다.

defineNuxtComponent()은 defineComponent() 과 유사하며, 옵션 API를 사용한 유형이 안전한 Vue 컴포넌트를 정의하기 위한 헬퍼 함수이다. defineNuxtComponent() 래퍼 함수는 asyncData 및 head 컴포넌트 옵션에 대한 지원도 추가한다.

<script setup lang="ts"> 사용은 Nuxt 3에서 Vue 컴포넌트를 선언하는 권장 방법이다.

 

참고) Nuxt-개요 > 데이터 가져오기

 

asyncData()

앱에서 setup()를 사용하지 않기로 선택한 경우 구성요소 정의 내에서 asyncData() 메소드를 사용할 수 있다.

<!--
pages/index.vue
-->

<script lang="ts">
export default defineNuxtComponent({
  async asyncData() {
    return {
      data: {
        greetings: 'hello world!'
      }
    }
  },
})
</script>

 

head()

앱에서 setup() 을 사용하지 않기로 선택한 경우 컴포넌트 정의 내에서 head() 메소드를 사용할 수 있다.

<!--
pages/index.vue
-->

<script lang="ts">
export default defineNuxtComponent({
  head(nuxtApp) {
    return {
      title: 'My site'
    }
  },
})
</script>