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.
Using
<script setup lang="ts"> is the recommended way of declaring Vue components in Nuxt 3. Read more in 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:
pages/index.vue
<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:
pages/index.vue
<script lang="ts">export default defineNuxtComponent({ head(nuxtApp) { return { title: 'My site' } },})</script>