web-dev-qa-db-ja.com

Nuxt.js-レイアウト内のコンポーネントの使用方法？

そこで、Nuxt.jsをいじり始めました。デフォルトのレイアウトファイルを変更して、ヘッダーとフッターを追加したい。そのために、ヘッダーとフッターコンポーネントを作成し、ページコンテンツタグ（<nuxt/>） それらの間の。しかし、何も起こりません。

これが私の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>

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>

これに何か問題がありますか？最初にレイアウトファイル内のコンポーネントを使用できますか？新しく作成したコンポーネントを別の場所に個別に登録する必要がありますか？

悲しいことに、これについて特に多くの情報はありません。どうすれば達成できますか？

前もって感謝します！

javascriptvue.jsvuejs2nuxt.js
7
Codearts

<header />を<Header />に変更してみてください。 （ビューに定義したコンポーネントは、ヘッダーがHのヘッダーです。）

大文字は重要です。この場合、headerは 既存の要素タグ 、Vueは、文句を言わずに空のタグをレンダリングするだけです。

10
JAM

コンポーネント名に予約済みのHTMLタグを使用することはできません。フッター、ヘッダーなどが含まれます。 Here 予約済みタグ名の完全なリスト。

したがって、コンポーネントを別の名前に変更する必要があります。たとえば、my-header

5
Aldarund