mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-27 08:02:01 +00:00
f82a4b67a3
Co-authored-by: Daniel Roe <daniel@roe.dev> Co-authored-by: Damian Głowala <48835293+DamianGlowala@users.noreply.github.com> Co-authored-by: Pooya Parsa <pooya@pi0.io>
32 lines
923 B
Markdown
32 lines
923 B
Markdown
# `defineNuxtComponent`
|
|
|
|
`defineNuxtComponent()` is a helper function for defining type safe Vue components using options API similar to [defineComponent()](https://vuejs.org/api/general.html#definecomponent). `defineNuxtComponent()` wrapper also adds support for `asyncData` component option.
|
|
|
|
::alert{type=warning}
|
|
Options API support for `asyncData` 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:
|
|
|
|
```vue [pages/index.vue]
|
|
<script lang="ts">
|
|
export default defineNuxtComponent({
|
|
async asyncData() {
|
|
return {
|
|
data: {
|
|
greetings: 'hello world!'
|
|
}
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
```
|