<NuxtLayout>

<NuxtLayout/> 컴포넌트를 이용하여 app.vue 혹은 error.vue 의 기본 레이아웃을 활성화할 수 있다.

<!--
app.vue
-->

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

참고) Nuxt-Directory> layouts

 

Props

• name : 렌더링할 레이아웃 이름을 지정한다. 문자열, 리액티브 참조 또는 계산된 속성일 수 있다. 이는 layouts/  디렉터리에 있는 해당 레이아웃 파일의 이름과 일치 해야한다.
  • type : string
  • default : default 

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

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

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

레이아웃 이름은 kebab-case로 정규화되므로 레이아웃 파일 이름이 errorLayout.vue 이면  <NuxtLayout />의 name 속성은 error-layout 이된다.

<!--
error.vue
-->

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

참고) Nuxt-Directory> layouts

 

추가 Props

NuxtLayout 은 레이아웃에 전달해야 할 추가 props 도 허용한다. 이러한 사용자 정의 props 를 속성으로 액세스할 수 있다.

<!-- 
pages/some-page.vue
-->

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

위의 예에서 custom.vue 파일에서 title 값은 <script setup> 안 템플릿 혹은 useAttrs().title 안에서 $attrs.title 를 통해 사용할 수 있다.

<!--
layout/custome.vue
-->

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

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

 

Transitions

<NuxtLayout /> 의 <slot />를 통해 들어오는 콘텐츠를 렌더링한 다음, Vue의 <Transition> 컴포넌트를 래핑하여 레이아웃 트랜지션이 활성화된다. 예상대로 작동하려면 페이지 컴포넌트의 루트 요소가 아닌<NuxtLayout /> 에 적용하는 것이 좋다 .

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

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

참고) Nuxt-개 > Transitions

 

Layout's Ref

레이아웃 컴포넌트의 참조를 얻으려면 ref.value.layoutRef 를 통해 액세스한다.

<!--
app.vue
-->

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

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

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

참고) Nuxt-Directory> layouts Layouts