레이아웃과 내비게이션

여러 페이지가 공통 헤더·푸터·사이드바를 공유할 때, 매번 같은 코드를 복사하면 관리가 어렵습니다. Nuxt의 레이아웃 은 페이지를 감싸는 공통 틀을 한 곳에서 정의하게 해줍니다. 이번 레슨에서는 app.vue, <NuxtPage>, <NuxtLayout> 의 관계와 페이지별 레이아웃 지정을 다룹니다.

학습 목표

• app.vue 와 <NuxtPage> 의 역할을 이해한다.
• layouts/default.vue 로 기본 레이아웃을 만든다.
• <NuxtLayout> 으로 레이아웃을 적용한다.
• definePageMeta 로 페이지마다 다른 레이아웃을 지정한다.

app.vue 와 NuxtPage

app.vue 는 모든 페이지를 감싸는 루트 컴포넌트 입니다. 여기에 <NuxtPage> 를 두면 현재 URL에 맞는 페이지가 그 자리에 그려집니다.

<!-- app.vue -->
<template>
  <div>
    <!-- 모든 페이지에 공통으로 보일 영역 -->
    <NuxtPage />
  </div>
</template>

app.vue 가 없으면 Nuxt는 pages/ 만으로 동작하지만, 보통은 app.vue 를 두고 그 안에서 레이아웃을 적용합니다.

기본 레이아웃 만들기

layouts/default.vue 는 이름이 없는 페이지에 자동 적용 되는 기본 레이아웃입니다. 안쪽의 <slot /> 자리에 실제 페이지가 들어갑니다.

<!-- layouts/default.vue -->
<template>
  <div>
    <header>
      <NuxtLink to="/">홈</NuxtLink>
      <NuxtLink to="/tasks">일감</NuxtLink>
      <NuxtLink to="/about">소개</NuxtLink>
    </header>

    <main>
      <!-- 페이지 내용이 여기에 들어옴 -->
      <slot />
    </main>

    <footer>© 2026 dev.syw.kr</footer>
  </div>
</template>

NuxtLayout 적용

레이아웃이 실제로 쓰이려면 app.vue 에서 <NuxtPage> 를 <NuxtLayout> 으로 감싸야 합니다.

<!-- app.vue -->
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

이렇게 하면 페이지가 layouts/default.vue 의 <slot /> 자리에 자동으로 들어갑니다.

💡 TIP — app.vue 자체에는 헤더·푸터를 두지 말고, 레이아웃 에 두는 것이 좋습니다. 그래야 페이지마다 레이아웃을 바꿀 수 있습니다.

페이지별 레이아웃 지정

기본이 아닌 레이아웃을 만들고, 페이지에서 골라 쓸 수 있습니다.

layouts/
├── default.vue     # 일반 페이지
└── admin.vue       # 관리자 페이지

페이지에서는 definePageMeta 로 레이아웃을 선택합니다.

<!-- pages/admin/index.vue -->
<script setup>
definePageMeta({
  layout: 'admin',
});
</script>

<template>
  <h1>관리자 대시보드</h1>
</template>

레이아웃 파일 이름이 admin.vue 이면 layout: 'admin' 으로 지정합니다(케밥 케이스 규칙).

레이아웃 끄기

특정 페이지(예: 로그인 화면)에서 레이아웃 없이 보여주고 싶다면 false 로 둡니다.

<script setup>
definePageMeta({ layout: false });
</script>

동적으로 레이아웃 바꾸기

런타임에 레이아웃을 바꿔야 한다면 setPageLayout 을 씁니다.

setPageLayout('admin');

⚠️ 주의 — setPageLayout 은 네비게이션 도중(미들웨어 등)에 호출해야 안정적으로 적용됩니다.

요약

• app.vue 의 <NuxtPage> 자리에 현재 페이지가 렌더링됩니다.
• layouts/default.vue 는 이름 없는 페이지에 자동 적용되는 공통 틀입니다.
• <NuxtLayout> 으로 페이지를 감싸야 레이아웃이 동작합니다.
• definePageMeta({ layout }) 로 페이지마다 레이아웃을 고르거나 끌 수 있습니다.

연습문제

1. layouts/default.vue 에 상단 메뉴(홈·일감·소개)를 넣고 모든 페이지에 적용해 보세요.
2. layouts/admin.vue 를 만들고 /admin 페이지에만 적용해 보세요.
3. pages/login.vue 에서 레이아웃을 끄고(layout: false) 단독 화면으로 만들어 보세요.
4. 레이아웃의 <slot /> 위치를 바꿔 푸터가 항상 화면 아래에 붙도록 스타일을 적용해 보세요.

힌트 — 레이아웃 선택은 definePageMeta 안의 layout 속성으로, 슬롯은 <slot /> 으로 표현합니다.