Components directory
The components
directory contains your Vue.js Components. Components are what makes up the different parts of your page and can be reused and imported into your pages, layouts and even other components.
Fetching Data
To access asynchronous data from an API in your components you can use Nuxt fetch()
.
By checking $fetchState.pending
, we can show a message when data is waiting to be loaded. We can also check $fetchState.error
and show an error message if there is an error fetching the data. When using fetch()
, we must declare the appropriate properties in data()
. The data that comes from the fetch can then be assigned to these properties.
<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>
Components Discovery
Starting from v2.13
, Nuxt can auto-import the components you use. To activate this feature, set components: true
in your configuration:
export default {
components: true
}
Any components in the ~/components
directory can then be used throughout your pages, layouts (and other components) without needing to explicitly import them.
| components/
--| TheHeader.vue
--| TheFooter.vue
<template>
<div>
<TheHeader />
<Nuxt />
<TheFooter />
</div>
</template>
Dynamic Imports
To dynamically import a component, also known as lazy loading a component, all you need to do is add the Lazy
prefix in your templates.
<template>
<div>
<TheHeader />
<Nuxt />
<LazyTheFooter />
</div>
</template>
Using the lazy prefix you can also dynamically import a component when an event is triggered.
<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>
Nested Directories
If you have components in nested directories such as:
components/
base/
foo/
CustomButton.vue
The component name will be based on its own path directory and filename. Therefore, the component will be:
<BaseFooCustomButton />
If we want to use it as <CustomButton />
while keeping the directory structure, we can add the directory of CustomButton.vue
into nuxt.config.js
.
components: {
dirs: [
'~/components',
'~/components/base/foo'
]
}
And now we can use <CustomButton />
instead of <BaseFooCustomButton />
.
<CustomButton />