components

Le répertoire des composants contient les composants Vue.js. Les composants sont les éléments qui constituent les différentes parties d'une page et peuvent être réutilisés et importés dans des pages, layouts ou même d'autres composants.

Récupérer de la data

Pour récupérer de la data depuis une API de manière asynchrone dans les composants, on peut utiliser le hook fetch() de Nuxt.

En utilisant $fetchState.pending, on peut afficher un message pendant le chargement de la data. En utilisant $fetchState.error, on peut afficher un message d'erreur s'il y a une erreur lors de la récupération des données. Lorsque l'on utilise fetch, il faut définir la data dans la propriété data, celle-ci sera par la suite remplie une fois que les données auront été récoltées.

<template>
  <div>
    <p v-if="$fetchState.pending">Chargement....</p>
    <p v-else-if="$fetchState.error">
      Erreur lors de la récupération des montagnes
    </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>

Découverte des composants

À partir de la version 2.13, Nuxt peut automatiquement importer les composants lorsqu'ils sont utilisés dans les templates. Pour activer cette feature, il suffit de définir components: true dans le fichier de configuration:

export default {
  components: true
}

Ainsi, lors de la création de composants dans le répertoire components, ils seront importés et directement disponibles.

components/
  TheHeader.vue
  TheFooter.vue

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

Imports dynamiques

Pour importer dynamiquement un composant - le "lazy load" (le charger paresseusement) - il suffit juste de le préfixer par un Lazy dans les templates.

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

Utiliser le préfixe Lazy permet aussi d'importer dynamiquement un composant lorsqu'un évènement est déclenché.

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

Répertoires imbriqués

Si on a des composants dans des répertoires imbriqués comme ceci:

components/
  base/
      foo/
         CustomButton.vue

Nous recommandons d'utiliser le nom du répertoire dans le nom du fichier pour plus de clarté.

<BaseFooCustomButton />

Si nous voulons le déclarer comme <CustomButton /> tout en gardant la structure de répertoire, nous pouvons ajouter le répertoire de CustomButton.vue dans nuxt.config.js.

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

Et maintenant nous pouvons utiliser <CustomButton /> au lieu de <BaseFooCustomButton />.

<CustomButton />