Nuxt.js - 레이아웃 내 컴포넌트 사용방법

Nuxt.js - 레이아웃 내 컴포넌트 사용방법

그래서 Nuxt.js랑 같이 놀기 시작했어요.기본 레이아웃 파일을 머리글과 바닥글을 가지도록 수정하고 싶습니다.이를 위해 Header 컴포넌트와 Footer 컴포넌트를 생성하여 페이지 내용 태그를 배치합니다( ).<nuxt/>)을 클릭합니다.하지만 아무 일도 일어나지 않는다.

이게 기본 설정입니다.vue 레이아웃 파일:

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

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

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

<style>
...
</style>

여기 제 머리글이 있습니다.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>

이거 뭐 잘못됐나요?레이아웃 파일 내의 컴포넌트를 처음부터 사용할 수 있습니까?새로 만든 컴포넌트를 따로 등록해야 하나요?

안타깝게도 이에 대한 정보는 많지 않습니다.어떻게 하면 좋을까요?

잘 부탁드립니다!

변경해 보다<header />로.<Header />. (뷰에 정의한 컴포넌트는 Header(대문자 H)입니다.)

대문자는 중요합니다.이 경우,header기존 요소 태그이므로 Vue는 불평 없이 빈 태그를 렌더링합니다.

구성 요소 이름에 예약된 HTML 태그를 사용할 수 없습니다.바닥글, 머리글 등이 포함됩니다.예약된 태그 이름의 전체 목록입니다.

따라서 컴포넌트의 이름을 my-header와 같이 다른 것으로 변경해야 합니다.

언급URL : https://stackoverflow.com/questions/51747207/nuxt-js-how-to-use-component-inside-layout