[ Nuxt ] 일부 페이지에는 Layout 적용 하지 않기

 

Nuxt Layout 공식 문서 참고

layouts/ · Nuxt Directory Structure

 

 

레이아웃을 쓰지 않을 페이지에는 definePageMeta를 사용해서 layout을 false 처리 해주면 해당 페이지에는 레이아웃이 제외된다.

definePageMeta({
  layout: false,
});

 

 

 

근데 만약 이게 적용이 안 된다면 NuxtLayout에 적용되어 있는 레이아웃 파일 이름을 확인해보자.

<NuxtLayout name="container">
  <NuxtPage />
</NuxtLayout>

만약 이처럼 layout에 특정 이름을 적용해줬다면 위의 defindePageMeta 코드가 작동하지 않을 것이다.

 

그렇기 때문에 definePageMeta로 레이아웃을 끄거나, 바꿔주려면 기본적으로 설정된 Layout의 이름이 default여야만 한다. 

 

 

 

layouts/default.vue

<template>
  <main>
    <slot></slot>
  </main>
</template>

 

 

App.vue

<NuxtLayout>
  <NuxtPage />
</NuxtLayout>

 

 

레이아웃을 사용하지 않을 페이지

definePageMeta({
  layout: false,
});

 

 

다른 레이아웃을 사용할 페이지

definePageMeta({
  layout: 'footer',
});