web-dev-qa-db-fra.com

Nuxt.js - Comment utiliser le composant à l'intérieur de la mise en page?

J'ai donc commencé à jouer avec Nuxt.js. Je souhaite modifier le fichier de mise en page par défaut pour avoir un en-tête et un pied de page. Pour cela, je veux créer un composant En-tête et Pied de page et placer la balise de contenu de page (<nuxt/>) entre eux. Mais rien ne se passe.

Voici mon fichier de mise en page default.vue:

<template>
  <div>
    <header/>
    <nuxt/>
    <h1>Footer</h1>
  </div>
</template>

<script>
import Header from "~/components/Header.vue";

export default {
  components: {
    Header
  }
};
</script>

<style>
...
</style>

Voici mon fichier de composant Header.vue:

<template>
<div>
<h1>Header</h1>
   <div class="links">
          <nuxt-link to="/" class="button--grey">Home</nuxt-link>
          <nuxt-link to="/about" class="button--grey">About</nuxt-link>
      </div>
</div>
</template>

<style>
.links {
  padding-top: 15px;
}
</style>

Y a-t-il quelque chose qui ne va pas avec ça? Puis-je utiliser des composants dans des fichiers de disposition en premier lieu? Dois-je enregistrer les composants nouvellement créés séparément ailleurs?

Malheureusement, il n'y a pas beaucoup d'informations spécifiques à ce sujet. Comment puis-je y parvenir?

Merci d'avance!

javascriptvue.jsvuejs2nuxt.js
7
Codearts

Essayez de changer <header /> à <Header />. (car le composant que vous avez défini pour la vue est En-tête avec un H. majuscule)

La capitalisation est importante. Dans ce cas, parce que header est un balise d'élément existante , Vue rendra simplement une balise vide sans se plaindre.

10
JAM

Vous ne pouvez pas utiliser de balises HTML réservées pour les noms de composants. Il comprend un pied de page, un en-tête, etc. ici liste complète des noms de balises réservés.

Vous devez donc renommer votre composant en quelque chose de différent, par exemple my-header

5
Aldarund