defineNuxtComponent
defineNuxtComponent() は、Options API を使用して型安全なコンポーネントを定義するためのヘルパー関数です。
defineNuxtComponent()
は、defineComponent()
に似た Options API を使用して型安全な Vue コンポーネントを定義するためのヘルパー関数です。defineNuxtComponent()
ラッパーは、asyncData
および head
コンポーネントオプションのサポートも追加します。
Nuxt で Vue コンポーネントを宣言するには、<script setup lang="ts">
を使用することが推奨されています。
asyncData()
アプリで setup()
を使用しない場合、コンポーネント定義内で asyncData()
メソッドを使用できます:
pages/index.vue
export default defineNuxtComponent({
async asyncData() {
return {
data: {
greetings: 'hello world!'
}
}
},
})
head()
アプリで setup()
を使用しない場合、コンポーネント定義内で head()
メソッドを使用できます:
pages/index.vue
export default defineNuxtComponent({
head(nuxtApp) {
return {
title: 'My site'
}
},
})
※このページは Nuxt.js 公式ドキュメントの翻訳ページ(非公式)です。
公式ドキュメントの該当ページはこちら:
https://nuxt.com/docs/3.x/api/utils/define-nuxt-component