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