[Nuxt3] layout 설정 방법

최근에 Nuxt 프로젝트를 진행하고 있는데,

layout 설정을 기존처럼 진행하다가 Nuxt에서 설정하는 방법이 있는 걸 알고 급 변경했다.

 

우선, Nuxt의 layout은 root/layouts 에서  default.vue 파일을 만들어서 작업한다.

 

------------------------------------------------------

root

├─ layouts

│    ├─ default.vue

│    └─ main.vue
├─ pages
│    ├─ index.vue
│    ├─ main.vue

├─ app.vue

└─  app.config.ts
------------------------------------------------------

 

/layouts/default.vue는 기본 레이아웃을 구성하고 slot으로 content  영역을 변경할 수 있도록 한다.

따로 코드를 추가하지 않아도 기본적으로 적용된다.

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

<template>
  <div class="wrapper" id="wrapper">
    <Accessibility />
    <Header />
    <div class="content" id="content">
      <SubTop />
      <div class="wrap">
        <slot /> // countent 영역
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup>
import Header from "@/components/layout/Header.vue";
import Footer from "@/components/layout/Footer.vue";
import Accessibility from "@/components/layout/Accessibility.vue";
import SubTop from "@/components/layout/SubTop.vue";
</script>

<style scoped></style>

 

 

사이트가 같은 레이아웃을 사용하는 게 아니고, 특정한 화면에서 다른 화면을 사용하고자 한다면, 

/ layouts 폴더에 다른 이름으로 vue 파일을 추가한다.

<!-- /layouts/main.vue -->
<template>
  <div class="wrapper" id="wrapper">
    <Accessibility />
    <Header />
    <div class="content" id="content">
      <slot />
    </div>
    <Footer />
  </div>
</template>

<script setup>
import Header from "@/components/layout/Header.vue";
import Footer from "@/components/layout/Footer.vue";
import Accessibility from "@/components/layout/Accessibility.vue";
</script>

<style scoped></style>

 

/app.vue 는 nuxt에서 기본적인 사항을 정의한다.

<!-- app.vue -->

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

 

이렇게 하면 모든 vue 파일에 default 레이아웃이 설정된다.

 

여기서, main.vue에 있는 레이아웃을 적용하고 싶다면 아래 방법을 참고하자.

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

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

<script setup>
  // main 레이아웃 분리
  definePageMeta({
   layout: "main",
  });
</script>

 

definePageMeta에서 main 레이아웃으로 변경해주면 된다.