[Nuxt3] #4 Nuxt 3 레이아웃 만들기 (페이지별 레이아웃 다르게 하기, slot)

Layouts with Nuxt 3 — Course part 4

https://www.youtube.com/watch?v=GQjU4FfM3II&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=4

 

유튜브 강의를 참고하고 있습니다.

 

---

1. DefaultLayout 만들기

1. layouts 폴더를 만들고, 그 안에 default.vue 파일을 만든다.
2. <slot>을 사용해 pages/~.vue 파일의 내용을 <slot> 부분으로 대체한다.

 

• layouts/default.vue

layouts 폴더 안에 defalut.vue 파일을 만들면 별도의 import 없이 자동으로 DefalutLayout이 된다.

<template>
  <div class="h-screen p-5 bg-slate-700 text-base text-white">
    <Header/>

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

 

• pages/index.vue

<template>
  <h1>index page</h1>
</template>

 

• app.vue

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

 

2. CustomLayout 만들기

1. DefaultLayout 말고, 다른 레이아웃을 만들고 싶을 때 layout 폴더 안에 custom.vue 파일을 만든다.
2. CustomLayout은 기본 레이아웃이 아니기 때문에 <script> 태그 안에 정의를 해야 한다.

 

• layouts/custom.vue

<template>
  <div class="h-screen p-5 bg-slate-500 text-base text-white">
    <h1 class="text-lg font-bold">Custom layout</h1>

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

 

• pages/custom.vue

<template>
  <h1>Custom page</h1>
</template>

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

 

결과 화면