Nuxt는 공통 UI 패턴을 재사용 가능한 레이아웃으로 추출하는 레이아웃 프레임워크를 제공합니다.

<aside> 🔖 최상의 성능을 위해 이 layouts/디렉터리에 있는 컴포넌트는 사용 시 비동기 가져오기를 통해 자동으로 로드됩니다.

</aside>

레이아웃 활성화

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

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

레이아웃을 사용하려면:

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

<aside> ❗ 레이아웃 이름은 kebab-case로 정규화되므로 someLayout은 some-layout이 됩니다.

</aside>

<aside> ❗ 레이아웃을 지정하지 않으면 layouts/default.vue가 사용됩니다.

</aside>

<aside> 💡 애플리케이션에 단일 레이아웃만 있는 경우 대신 app.vue를 사용하는 것이 좋습니다.

</aside>

<aside> ⚠️ 다른 컴포넌트와 달리 레이아웃에는 Nuxt가 레이아웃 변경 간에 전환을 적용할 수 있도록 단일 루트 요소가 있어야 하며 이 루트 요소는 <slot /> 일 수 없습니다.

</aside>

Default Layout

~/layouts/default.vue를 추가합니다.

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

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