defineNuxtComponent
`defineNuxtComponent()` は、Options API を使用してタイプセーフなコンポーネントを定義するためのヘルパー関数です。
defineNuxtComponent() は、defineComponent() と同様に、オプション API を使用してタイプセーフな Vue コンポーネントを定義するためのヘルパー関数です。defineNuxtComponent() ラッパーは、asyncData と head コンポーネントオプションのサポートも追加します。Nuxt 3 では、Vue コンポーネントを宣言する際に
<script setup lang="ts"> を使用することをお勧めします。asyncData()
アプリケーションで setup() を使用しない場合は、コンポーネント定義内で asyncData() メソッドを使用できます。
pages/index.vue
<script lang="ts">
export default defineNuxtComponent({
async asyncData() {
return {
data: {
greetings: 'hello world!'
}
}
},
})
</script>
head()
アプリケーションで setup() を使用しない場合は、コンポーネント定義内で head() メソッドを使用できます。
pages/index.vue
<script lang="ts">
export default defineNuxtComponent({
head(nuxtApp) {
return {
title: 'My site'
}
},
})
</script>