Nuxt/docs/content/1.docs/3.api/3.utils/define-nuxt-component.md
Sébastien Chopin 90784f79d7
docs: new website design (#9007)
* docs: implement new website theme

* chore: rename dirs

* chore: update build

* lint fix

* chore: update deps

* fix: include node_modules in esbuild step

* chore: update deps

* Update .gitignore

* chore: update theme version

* up

* up

* fix: use svg for illustration

* chore: update to 0.0.12

* chore: force parse5 resolution

* stay with build

* feat: always display first home section

* Update yarn.lock

* chore: update theme

* fix lint

* docs: update home title

* chore: update website theme version

* Update docs/content/0.index.md

Co-authored-by: pooya parsa <pyapar@gmail.com>

* Update docs/content/0.index.md

Co-authored-by: pooya parsa <pyapar@gmail.com>

* up

* chore: bump theme version

* up

* chore: up

* up up and up

* chore: generate

* fix: boolean value

* feat: new images

* update again

* chore: up

* ouep

* chore: up

Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Clément Ollivier <clement.o2p@gmail.com>
Co-authored-by: pooya parsa <pyapar@gmail.com>
2022-11-16 11:04:28 +01:00

1.4 KiB

title description
defineNuxtComponent defineNuxtComponent() is a helper function for defining type safe components with Options API.

defineNuxtComponent

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.

::alert{type=warning} Options API support for asyncData and head may well change before the stable release of Nuxt 3. ::

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

:ReadMore{link=/getting-started/data-fetching#options-api-support}

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>

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>