コンポーネントディレクトリ
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>
コンポーネントの探索
![](/_nuxt/image/e6923a.png)
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 />
![Sébastien Chopin](/_nuxt/image/e847b9.png)
![Nazaré da Piedade](/_nuxt/image/d5c785.png)
![Nobu](/_nuxt/image/888ba6.png)
![川音리오](/_nuxt/image/345a82.png)
![Maciek Palmowski](/_nuxt/image/2bdab1.png)
![Nestor Vera](/_nuxt/image/b6ef28.png)
![Daniel Roe](/_nuxt/image/0786f3.png)
![Yue Yang](/_nuxt/image/40c994.png)
![Jeronimas](/_nuxt/image/ba9a98.png)
![Clément Ollivier](/_nuxt/image/77339c.png)
![Alexander Lichter](/_nuxt/image/073577.png)
![N3-rd](/_nuxt/image/20bdf5.png)
![Adrien Zaganelli](/_nuxt/image/c3f019.png)
![Mag](/_nuxt/image/1fe278.png)
![Stefan Huber](/_nuxt/image/c3653a.png)
![Olga Bulat](/_nuxt/image/e50af3.png)
![Paiva](/_nuxt/image/ea02f0.png)
![Florian Reuschel](/_nuxt/image/ee31ca.png)
![Savas Vedova](/_nuxt/image/d403a7.png)
![HIJACK](/_nuxt/image/d0b78e.png)
![Vinícius Alves](/_nuxt/image/ba75e5.png)
![Kareem Dabbeet](/_nuxt/image/c79dfa.png)
![Valentín Costa](/_nuxt/image/3dd0d7.png)
![Ryan Skinner](/_nuxt/image/ec2d86.png)
![Alex Hirzel](/_nuxt/image/980fb6.png)
![Ajeet Chaulagain](/_nuxt/image/2fb9d1.png)
![René Eschke](/_nuxt/image/ddfbaa.png)
![Nico Devs](/_nuxt/image/5fa1fe.png)
![Muhammad](/_nuxt/image/76bed9.png)
![Naoki Hamada](/_nuxt/image/475300.png)
![Tom](/_nuxt/image/aae9cc.png)
![Yann Aufray](/_nuxt/image/305a71.png)
![Anthony Chu](/_nuxt/image/027d85.png)
![Nuzhat Minhaz](/_nuxt/image/431077.png)
![Lucas Portet](/_nuxt/image/260cbe.png)
![Richard Schloss](/_nuxt/image/7f63ae.png)
![Bobby](/_nuxt/image/42cdae.png)
![bpy](/_nuxt/image/ecc096.png)
![Antony Konstantinidis](/_nuxt/image/1434b0.png)
![Hibariya](/_nuxt/image/febb5a.png)
![Jose Seabra](/_nuxt/image/ede04e.png)
![Eze](/_nuxt/image/f22c13.png)
![Florian Lefebvre](/_nuxt/image/e3705e.png)
![Lucas Recoaro](/_nuxt/image/8cdc5c.png)
![Julien SEIXAS](/_nuxt/image/40a795.png)