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">
      Update layout
    </button>
  </div>
</template>

페이지별로 레이아웃 재정의하기

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

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

<template>
  <div>
    <NuxtLayout name="custom">
      <template #header>
        Some header template content.
      </template>

      The rest of the page
    </NuxtLayout>
  </div>
</template>

<template>
  <div>
    <header>
      <slot name="header">
        Default header content
      </slot>
    </header>
    <main>
      <slot />
    </main>
  </div>
</template>