5. 레이아웃(layouts)

이전 장을 통해 컴포넌트 생성 및 컴포넌트 구조화에 대해 좀 더 깊게 이해했을 것이다. 이번 장에서는 컴포넌트를 배치함에 있어 레이아웃을 동적으로 적용하는 방법을 알아보겠다. 이런 형태의 사용은 예를 들어, 인가된 사용자(login)와 인가되지 않은(default or logout) 사용자의 화면 구성이 다를 때 특히 유용하다. 간단한 예를 들어 살펴 보겠다.

 

layouts 디렉터리

/pages, /components 디렉터리와 마찬가지로 Nuxt 에서는 레이아웃 엘리먼트를 디렉터리 기반으로 전개할 수 있다. /pages/index.vue 소스를 아래와 같이 바꿔보자. app.vue 소스도 바꾼다.

 

/pages/index.vue

<template>
  <div>
    <div>Main Page</div>
  </div>
</template>

 

/app.vue

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>
<script setup lang="ts">
</script>

 

이제, 프로젝트 루트 디렉토리에서 /layouts 디렉터리를 생성하자. /layouts 디렉터리에서 default.vue 파일을 생성한다.

 

/layouts/default.vue

<template>
  <div class="h-screen text-white bg-slate-900">
    <p>Default Layout</p>
  </div>
</template>

현재의 모습은 아래와 같다.

동적으로 레이아웃이 변하기 위해서 빌트인 컴포넌트인 <slot> 을 추가한다. 결과는 아래와 같다.

 

/layouts/default.vue

<template>
  <div class="h-screen text-white bg-slate-900">
    <p>Default Layout</p>
    <slot />
  </div>
</template>

 

커스텀 레이아웃

/layouts 디렉터리에 custom.vue 파일을 생성하고, /layouts/default.vue 와 비슷하게 아래와 같이 코딩한다.

 

/layouts/custom.vue

<template>
  <div class="h-screen text-white bg-slate-900">
    <p>Custom Layout</p>
    <slot />
  </div>
</template>

레이아웃을 적용할 페이지 /pages/custom.vue 를 생성하고 아래와 같이 코딩한다.

 

/pages/custom.vue

<template>
  <div>Custom page</div>
</template>

/pages/custom.vue 에서 사용할 커스텀 레이아웃을 설정한다.

 

/pages/custom.vue

<script setup lang="ts">
definePageMeta({
  layout: "custom"
});
</script>
<template>
  <div>Custom page</div>
</template>

커스텀 레이아웃을 생성하기 위해서 definePageMeta 유틸을 사용한다. 유틸이므로 Nuxt 앱 어디서든 호출 가능하다.

custom.vue 페이지를 호출하면 아래와 같다.

확실하게 구분하기 위해서 커스텀 레이아웃의 배경색 CSS 를 변경해보자.

 

/layouts/custom.vue

<template>
  <div class="h-screen text-white bg-blue-900">
    <p>Custom Layout</p>
    <slot />
  </div>
</template>

아래와 같이 보일 것이다.

http://localhost:3000/ 을 호출하면 기본 레이아웃, http://localhost:3000/custom 을 호출하면 커스텀 레이아웃이 적용되는 것을 볼 수 있다.

 

다음 장에서는 공용 자원인 Assets 과 관련된 주제를 다루겠다.