コンポーネントディレクトリ
components ディレクトリには、Vue.js コンポーネントが含まれています。コンポーネントは、ページのさまざまな部分を構成するものであり、再利用して、ページ、レイアウト、さらには他のコンポーネントにインポートすることができます。
データの取得
コンポーネントの API から非同期データにアクセスするには、fetch() を使用できます。
$fetchState.pending をチェックすることで、データがロードされるのを待っている時にメッセージを表示することができます。$fetchState.error を確認し、データの取得中にエラーが発生した場合はエラーメッセージを表示することもできます。fetch() を使用する場合、data() で適切なプロパティを宣言する必要があります。フェッチから取得したデータは、これらのプロパティに割り当てることができます。
<template>
<div>
<p v-if="$fetchState.pending">Loading....</p>
<p v-else-if="$fetchState.error">Error while fetching mountains</p>
<ul v-else>
<li v-for="(mountain, index) in mountains" :key="index">
{{ mountain.title }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
mountains: []
}
},
async fetch() {
this.mountains = await fetch(
'https://api.nuxtjs.dev/mountains'
).then(res => res.json())
}
}
</script>
コンポーネントの探索
v2.13 以降、Nuxt はテンプレートで使用される時にコンポーネントを自動でインポートできます。この機能をアクティブにするには、構成を components: true と設定します：
export default {
components: true
}
~/componentsディレクトリにあるコンポーネントは、明示的にインポートしなくても、ページやレイアウト（および他のコンポーネント）全体で使用することができます。
| components/
--| TheHeader.vue
--| TheFooter.vue
<template>
<div>
<TheHeader />
<Nuxt />
<TheFooter />
</div>
</template>
動的インポート
コンポーネントを動的にインポートするには、コンポーネントの遅延読み込みともいわれる、Lazy プレフィックスをテンプレートに追加するだけです。
<template>
<div>
<TheHeader />
<Nuxt />
<LazyTheFooter />
</div>
</template>
lazy プレフィックスを使用すると、イベントが発火された時にコンポーネントを動的にインポートすることもできます。
<template>
<div>
<h1>Mountains</h1>
<LazyMountainsList v-if="show" />
<button v-if="!show" @click="show = true">Show List</button>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
}
}
</script>
ネストされたディレクトリ
次のようにネストされたディレクトリにコンポーネントがある場合：
components/
base/
foo/
CustomButton.vue
コンポーネント名は独自のパスディレクトリとファイル名に基づいています。したがってコンポーネントは次のようになります：
<BaseFooCustomButton />
ディレクトリ構造を保ったまま、<CustomButton /> として使用したい場合は、nuxt.config.js に CustomButton.vue のディレクトリを追加します。
components: {
dirs: [
'~/components',
'~/components/base/foo'
]
}
そして、 <BaseFooCustomButton /> の代わりに <CustomButton /> を使うことができます。
<CustomButton />