레이아웃 활성화

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

<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 레이아웃을 사용할 수 있습니다:

definePageMeta({
  layout: 'custom'
})

모든 페이지에 대해 기본 레이아웃을 직접 재정의하려면 <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>