Activation de la découverte automatique

Depuis la v2.13, Nuxt peut importer automatiquement vos composants lorsqu'ils sont utilisés dans vos templates. Pour activer cette fonctionnalité, définissez components: true dans votre configuration:

export default {
  components: true
}

Utilisation des composants

Une fois que vous avez créé vos composants dans le répertoire components, ils seront alors disponibles dans toute votre application sans qu'il soit nécessaire de les importer.

| components/
--| TheHeader.vue
--| TheFooter.vue

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

Noms des composants

Si vous avez des composants dans des répertoires imbriqués tels que :

| components/
--| base/
----| foo/
------| Button.vue

Le nom du composant sera basé sur son propre chemin et nom de fichier. Par conséquent, le composant sera :

<BaseFooButton />

Si vous souhaitez utiliser une structure de répertoires personnalisée qui ne doit pas faire partie du nom du composant, vous pouvez spécifier explicitement ces répertoires :

| components/
--| base/
----| foo/
------| Button.vue

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

Et maintenant, dans votre template, vous pouvez utiliser FooButton au lieu de BaseFooButton.

<FooButton />

Imports dynamiques

Pour importer dynamiquement un composant (également appelé chargement en arrière plan d'un composant), il vous suffit d'ajouter le préfixe Lazy au nom du composant.

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

Ceci est particulièrement utile si le composant n'est pas toujours nécessaire. En utilisant le préfixe Lazy, vous pouvez retarder le chargement du code du composant jusqu'au bon moment, ce qui peut être utile pour optimiser la taille de votre bundle JavaScript.

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

Aide-mémoire