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.

components/MountainsList.vue

<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>

See the chapter on fetch() for more details on how fetch works.

Components Discovery

Starting from v2.13, Nuxt can auto-import the components you use. To activate this feature, set components: true in your configuration:

nuxt.config.js

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

layouts/default.vue

<template>
  <div>
    <TheHeader />
    <Nuxt />
    <TheFooter />
  </div>
</template>

Learn more about the components module in the component discovery documentation and in this announcement article.

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.

layouts/default.vue

<template>
  <div>
    <TheHeader />
    <Nuxt />
    <LazyTheFooter />
  </div>
</template>

Using the lazy prefix you can also dynamically import a component when an event is triggered.

pages/index.vue

<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.

nuxt.config.js

components: {
  dirs: [
    '~/components',
    '~/components/base/foo'
  ]
}

And now we can use <CustomButton /> instead of <BaseFooCustomButton />.

pages/index.vue

<CustomButton />

See the components property for other methods of controlling component name.

Learn more about the components module.