layouts

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

최상의 성능을 위해 이 디렉터리에 있는 구성 요소는 사용 시 비동기 가져오기를 통해 자동으로 로드된다.

 

레이아웃 활성화

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

<!--
app.vue
-->

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

 

레이아웃을 사용하려면:

• definePageMeta 를 사용하여 페이지에 layout 속성을 ​​설정한다.
• <NuxtLayout> 에 name 속성을 설정한다.

 

레이아웃 이름은 kebab-case로 정규화되므로 someLayout 은 some-layout 이 된다.

레이아웃을 지정하지 않으면 layouts/default.vue 이 사용된다.

애플리케이션에 레이아웃이 하나만 있는 경우 app.vue 를 사용하는 것이 좋다.

다른 구성 요소와 달리 레이아웃에는 Nuxt가 레이아웃 변경 간에 트랜지션을 적용할 수 있도록 단일 루트 엘리먼트가 있어야 하며 이 루트 엘리먼트는 <slot /> 이 될 수 없다.

 

기본 레이아웃

~/layouts/default.vue 추가

<!--
layouts/default.vue
-->

<template>
  <div>
    <p>Some default layout content shared across all pages</p>
    <slot />
  </div>
</template>

레이아웃 파일에서 페이지 콘텐츠는 <slot /> 컴포넌트에 표시된다. 루트 엘리먼트는 div 가 된다.

 

명명된 레이아웃

# 디렉토리 구조

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

위 경우 페이지에서 custom 레이아웃을 사용할 수 있다.

<!--
pages/about.vue
-->

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

<NuxtLayout> 의 name 속성을 ​​사용하여 모든 페이지의 기본 레이아웃을 직접 재정의할 수 있다.

<!--
app.vue
-->

<script setup lang="ts">
// You might choose this based on an API call or logged-in status
const layout = "custom";
</script>

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

 

중첩된 디렉토리에 레이아웃이 있는 경우 레이아웃 이름은 자체 경로 디렉토리 및 파일 이름을 기반으로 하며 중복 세그먼트는 제거된다.

파일	레이아웃 이름
~/layouts/desktop/default.vue	desktop-default
~/layouts/desktop-base/base.vue	desktop-base
~/layouts/desktop/index.vue	desktop

 

명확성을 위해 레이아웃의 파일 이름이 이름과 일치하는 것이 좋다.

파일	레이아웃 이름
~/layouts/desktop/DesktopDefault.vue	desktop-default
~/layouts/desktop-base/DesktopBase.vue	desktop-base
~/layouts/desktop/Desktop.vue	desktop

 

레이아웃을 동적으로 변경하기

또한 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> 컴포넌트를 사용하여 모든 권한을 가질 수 있다.

<!--
pages/index.vue
-->

<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>

<!--
layouts/custom.vue
-->

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

페이지 내에서 <NuxtLayout>을 사용하는 경우 루트 요소가 아니라야 한다.

참고) Nuxt-개요 > Transitions