layouts

레이아웃 활성화

레이아웃은 app.vue에 <NuxtLayout>를 추가하여 활성화됩니다:

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

레이아웃을 사용하려면:

• 페이지에서 definePageMeta를 사용하여 layout 속성을 설정합니다.
• <NuxtLayout>의 name prop을 설정합니다.

기본 레이아웃

~/layouts/default.vue를 추가하세요:

<template>
  <div>
    <p>모든 페이지에서 공유되는 기본 레이아웃 콘텐츠</p>
    <slot />
  </div>
</template>

레이아웃 파일에서는 페이지의 내용이 <slot /> 컴포넌트에 표시됩니다.

이름이 지정된 레이아웃

-| layouts/
---| default.vue
---| custom.vue

이제 페이지에서 custom 레이아웃을 사용할 수 있습니다:

<script setup lang="ts">
definePageMeta({
  layout: 'custom'
})
</script>

<NuxtLayout>의 name 속성을 사용하여 모든 페이지의 기본 레이아웃을 직접 오버라이드할 수 있습니다:

<script setup lang="ts">
// API 호출이나 로그인 상태에 따라 선택할 수 있습니다
const layout = "custom";
</script>

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>

중첩 디렉토리에 레이아웃이 있는 경우, 레이아웃의 이름은 해당 경로 디렉토리와 파일명을 기반으로 하며, 중복된 세그먼트는 제거됩니다.

명확성을 위해, 레이아웃의 파일명이 이름과 일치하도록 하는 것을 권장합니다:

레이아웃 동적 변경

setPageLayout 헬퍼를 사용하여 레이아웃을 동적으로 변경할 수도 있습니다:

<script setup lang="ts">
function enableCustomLayout () {
  setPageLayout('custom')
}
definePageMeta({
  layout: false,
});
</script>

<template>
  <div>
    <button @click="enableCustomLayout">레이아웃 업데이트</button>
  </div>
</template>

페이지별로 레이아웃 오버라이드

페이지를 사용하는 경우, layout: false를 설정한 후 페이지 내에서 <NuxtLayout> 컴포넌트를 사용하여 완전히 제어할 수 있습니다.

<script setup lang="ts">
definePageMeta({
  layout: false,
})
</script>

<template>
  <div>
    <NuxtLayout name="custom">
      <template #header> 헤더 템플릿 콘텐츠입니다. </template>

      나머지 페이지 내용
    </NuxtLayout>
  </div>
</template>

<template>
  <div>
    <header>
      <slot name="header">
        기본 헤더 콘텐츠
      </slot>
    </header>
    <main>
      <slot />
    </main>
  </div>
</template>