`defineNuxtComponent()`

Defines a component with Options API while keeping Nuxt async data support.

Since Nuxt 3.0 Spec ↗

Syntax

export default defineNuxtComponent({ ... })

Parameters

Name	Type	Required	Description
`options`	`ComponentOptions`	Yes	Vue component options, plus an async `asyncData()` and a `head()` option resolved by Nuxt.

Returns

Component — A Nuxt-aware component definition.

Examples

<script lang="ts">
export default defineNuxtComponent({
  async asyncData() {
    const posts = await $fetch('/api/posts')
    return { posts }
  },
  head() {
    return { title: 'Posts' }
  },
})
</script>

<script lang="ts">
export default defineNuxtComponent({
  setup() {
    const { data } = useFetch('/api/me')
    return { data }
  },
})
</script>

Notes

Only needed for the Options API; with `<script setup>` you use composables directly and do not need this wrapper. It enables the Nuxt-specific `asyncData` and `head` options and ensures composables work with the correct async context.