Nuxt/docs/3.api/3.utils/define-nuxt-component.md

title	description	links
defineNuxtComponent	defineNuxtComponent() is a helper function for defining type safe components with Options API.	label icon to size Source i-simple-icons-github https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/component.ts xs

::note defineNuxtComponent() is a helper function for defining type safe Vue components using options API similar to defineComponent(). defineNuxtComponent() wrapper also adds support for asyncData and head component options. ::

::note Using <script setup lang="ts"> is the recommended way of declaring Vue components in Nuxt 3. ::

:read-more{to=/docs/getting-started/data-fetching}

asyncData()

If you choose not to use setup() in your app, you can use the asyncData() method within your component definition:

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

::warning Data from useAsyncData is only set once in the setup hook of your component. This means refreshNuxtData will not work with asyncData. If you need to re-run useAsyncData, you can change it with a method of the Option API. ::

head()

If you choose not to use setup() in your app, you can use the head() method within your component definition:

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