Activer la découverte automatique (auto-discovery)

Depuis la version v2.13, Nuxt est capable d'importer automatiquement les composants utilisés dans un template. Pour activer cette fonctionnalité, ajoutez components: true dans la configuration globable de votre projet Nuxt.

export default {
  components: true
}

Utiliser les composants

Une fois les composants créés dans le dossier /components, ils seront directement accessibles depuis n'importe quelle partie de l'application. Ils sont utilisables sans avoir à les importer.

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

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

Noms des composants

Si les composants sont imbriqués dans des dossiers, comme ici :

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

Le nom du composant sera déduit du nom du fichier dans lequel il se trouve et préfixé par le ou les noms des dossiers parents. Avec l'exemple plus haut, le nom du composant sera :

<BaseFooButton />

Si vous voulez utiliser une structure de dossier personnalisée qui ne doit pas se refléter dans le nom du composant, il est possible de le spécifier explicitement dans la configuration globale du projet Nuxt :

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

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

Avec cette configuration, le nom du composant sera FooButton plutôt que BaseFooButton.

<FooButton />

Imports dynamiques

Pour importer un composant de façon dynamique (chargement différé ou lazy-loading), il suffit d'ajouter le préfixe Lazy au nom du composant.

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

En utilisant le préfixe Lazy, le chargement du composant est différé en attendant le moment où il devient réellement nécessaire. C'est principalement utilisé pour optimiser la taille du 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>