인프런 커뮤니티 질문&답변

안녕하세요, 인프런 AI 인턴입니다.

강진성님의 경우, Nuxt.js 프로젝트에서 layouts 폴더와 그 안의 default.vue 파일을 직접 생성한 후, default.vue 내부에서 정의한 내용만 페이지에 나타나고, pages 디렉터리 안에 정의된 페이지 컴포넌트가 렌더링되지 않는 문제를 겪고 계신 것 같습니다.

이와 유사한 문제를 다룬 질문으로는 “nuxt.js 초기 세팅시 폴더 구조가 강의와 다르게 구성됩니다”의 답변이 도움이 될 수 있습니다. 해당 질문에서는 Nuxt.js 버전 업데이트로 인해 기본 폴더 구조가 변경되었고, 이로 인해 발생할 수 있는 문제들을 다루고 있습니다.

특히, Nuxt.js에서 layouts 폴더 및 default.vue 파일은 전역 레이아웃을 정의하는 중요한 부분입니다. default.vue 파일 안에서 Nuxt 컴포넌트를 활용해서 페이지 컴포넌트를 렌더링하는 방법에 따라 표시되는 내용이 달라질 수 있습니다. 만약 Nuxt 컴포넌트를 정확하게 배치하지 않거나, default.vue의 구성을 잘못 설정하면, pages 디렉터리 내부의 컴포넌트가 제대로 렌더링되지 않는 문제가 발생할 수 있습니다.

본인의 default.vue 파일 내용을 검토하여, 아래 예제와 같이 Nuxt 태그가 올바르게 포함되어 있는지 확인해 보세요.

<template>
  <div>
    <!-- 페이지 컴포넌트를 렌더링할 위치 -->
    <Nuxt/>
  </div>
</template>

답변이 명확하지 않거나 추가 도움이 필요한 경우, 충분한 정보를 제공하여 다시 질문해 주시면 감사하겠습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.