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() hook.

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

  1. <template>
  2.   <div>
  3.     <p v-if="$fetchState.pending">Loading....</p>
  4.     <p v-else-if="$fetchState.error">Error while fetching mountains</p>
  5.     <ul v-else>
  6.       <li v-for="(mountain, index) in mountains" :key="index">
  7.         {{ mountain.title }}
  8.       </li>
  9.     </ul>
  10.   </div>
  11. </template>
  12. <script>
  13.   export default {
  14.     data() {
  15.       return {
  16.         mountains: []
  17.       }
  18.     },
  19.     async fetch() {
  20.       this.mountains = await fetch(
  21.         'https://api.nuxtjs.dev/mountains'
  22.       ).then(res => res.json())
  23.     }
  24.   }
  25. </script>

components - 图1

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

Components Discovery

nuxt components module

Starting from v2.13, Nuxt can auto import your components when used in your templates. To activate this feature, set components: true in your configuration:

nuxt.config.js

  1. export default {
  2.   components: true
  3. }

Once you create your components in the components directory they will then be available to be auto imported.

  1. components/
  2.   TheHeader.vue
  3.   TheFooter.vue

layouts/default.vue

  1. <template>
  2.   <div>
  3.     <TheHeader />
  4.     <Nuxt />
  5.     <TheFooter />
  6.   </div>
  7. </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.

layouts/default.vue

  1. <template>
  2.   <div>
  3.     <TheHeader />
  4.     <Nuxt />
  5.     <LazyTheFooter />
  6.   </div>
  7. </template>

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

pages/index.vue

  1. <template>
  2.   <div>
  3.     <h1>Mountains</h1>
  4.     <LazyMountainsList v-if="show" />
  5.     <button v-if="!show" @click="showList">Show List</button>
  6.   </div>
  7. </template>
  9. <script>
  10.   export default {
  11.     data() {
  12.       return {
  13.         show: false
  14.       }
  15.     },
  16.     methods: {
  17.       showList() {
  18.         this.show = true
  19.       }
  20.     }
  21.   }
  22. </script>

Nested Directories

If you have components in nested directories such as:

  1. components/
  2.   base/
  3.       foo/
  4.          Button.vue

The component name will be based on its own path directory and filename. Therefore, the component will be:

  1. <BaseFooButton />

However, if you want to use custom directory strcture that should not be part of component name, can explicitly specify these directories:

  1. components/
  2.   base/
  3.       foo/
  4.          Button.vue

nuxt.config.js

  1. components: {
  2.   dirs: [
  3.     '~/components',
  4.     '~/components/base'
  5.   ]
  6. }

And now in your template you can use FooButton instead of BaseFooButton.

pages/index.vue

  1. <FooButton />

components - 图3

Learn more about the components module .