<NuxtLayout>

app.vue 또는 error.vue에서 default 레이아웃을 활성화하기 위해 <NuxtLayout /> 컴포넌트를 사용할 수 있습니다.

<template>
  <NuxtLayout>
    some page content
  </NuxtLayout>
</template>

Props

• name: 렌더링할 레이아웃 이름을 지정합니다. 문자열, 반응형 참조 또는 계산된 속성이 될 수 있습니다. app/layouts/ 디렉터리의 해당 레이아웃 파일 이름과 반드시 일치해야 합니다.
  • type: string
  • default: default

<script setup lang="ts">
// layouts/custom.vue
const layout = 'custom'
</script>

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

<template>
  <NuxtLayout name="error-layout">
    <NuxtPage />
  </NuxtLayout>
</template>

• fallback: name prop에 잘못된 레이아웃이 전달되면 어떤 레이아웃도 렌더링되지 않습니다. 이 경우 렌더링할 fallback 레이아웃을 지정합니다. app/layouts/ 디렉터리의 해당 레이아웃 파일 이름과 반드시 일치해야 합니다.
  • type: string
  • default: null

Additional Props

NuxtLayout은 레이아웃에 전달해야 할 추가 props도 모두 허용합니다. 이러한 커스텀 props는 이후 속성(attributes)으로 접근할 수 있게 됩니다.

<template>
  <div>
    <NuxtLayout
      name="custom"
      title="I am a custom layout"
    >
      <!-- ... -->
    </NuxtLayout>
  </div>
</template>

위 예시에서 title의 값은 템플릿에서는 $attrs.title로, <script setup>에서는 custom.vue에서 useAttrs().title로 사용할 수 있습니다.

<script setup lang="ts">
const layoutCustomProps = useAttrs()

console.log(layoutCustomProps.title) // I am a custom layout
</script>

Transitions

<NuxtLayout />는 들어오는 콘텐츠를 <slot />을 통해 렌더링하며, 이는 레이아웃 전환을 활성화하기 위해 Vue의 <Transition /> 컴포넌트로 감싸집니다. 이것이 예상대로 동작하려면 <NuxtLayout />이 페이지 컴포넌트의 루트 요소가 아니어야 합니다.

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

<template>
  <div>
    <!-- named slot -->
    <slot name="header" />
    <slot />
  </div>
</template>

Layout's Ref

레이아웃 컴포넌트의 ref를 얻으려면 ref.value.layoutRef를 통해 접근합니다.

<script setup lang="ts">
const layout = ref()

function logFoo () {
  layout.value.layoutRef.foo()
}
</script>

<template>
  <NuxtLayout ref="layout">
    default layout
  </NuxtLayout>
</template>

<script setup lang="ts">
const foo = () => console.log('foo')
defineExpose({
  foo,
})
</script>

<template>
  <div>
    default layout
    <slot />
  </div>
</template>