Nuxt3에서는 vue 파일에 특별한 설정이 없다면 해당 페이지의 레이아웃은 “default” 레이아웃으로 설정된다.

default 레이아웃 예시

<template>
  <div>
    <slot />
  </div>
</template>

실무에서 사용중인 레이아웃 예시

~/layouts/ 경로에 default.vue 파일을 추가하여 설정할 수 있다.

<template>
    <div id="page" class="page font--jakarta">
        <HeaderLayout1 />
        <slot />
        <FooterLayout1 />
    </div>
</template>

*default.vue *

※ 참고

  • slot 태그는 페이지를 렌더링하는 특수한 태그

  • 해당 태그가 존재하지 않을 경우, 이상 동작할 수 있으므로 반드시 포함 필요

  • 단, 페이지 영역을 숨겨할 경우는 v-show 등을 사용하여 제어해야 하며, v-show는 반드시 slot이 아닌 상위 Element에 위치해야 한다

<template>
  <div>
		<Header />
		<div v-show="false">
	    <slot />
		</div>
		<Footer />
  </div>
</template>

위 설명과 같이 기본 레이아웃은 default로 설정되어 있으며, 각 페이지 컴포넌트에서는 definePageMeta 메소드를 사용하여 사용 레이아웃을 변경할 수 있다.

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

만약 동적으로 레이아웃을 변경하고자 할때는 setPageLayout 메서드를 사용하여 변경할 수 있다.

<script lang="ts" setup>

// ...

setPageLayout('custom2')

</script>