[Nuxt.js] page 별로 layout 다르게 적용하는 방법

 

퍼블분께서. . . 모든 페이지마다 header/contents/footer 영역을 모두 추가해두셨다. 

<template>
    <div id="wrap">
		<!-- 헤더영역 -->
		<header id="header">
			<div class="gnb_wrap">
				<nav id="gnb">
					<ul>
						<li><nuxt-link to="" class="open">탭1</nuxt-link></li>
						<li><nuxt-link to="" class="open">탭2</nuxt-link></li>
						<li><nuxt-link to="" class="open">탭3</nuxt-link></li>
						...
					</ul>
				</nav>
			</div>
			
		</header>
        <!-- 컨텐츠 영역 -->
		<section id="container">
			...
        </section>
        <!-- 푸터영역 -->
		<footer id="footer">
        	...
		</footer>
		<!-- 푸터영역 -->
    </div>
</template>

 

오 마이 갓 ~~~ 

 

처음엔 한두페이지 뿐이었던 관리자 화면이어서 그냥 뒀는데, 일이 커지기 전에 고쳐본다. 

 

 

1. definePageMeta란?

Nuxt 3에서는 definePageMeta를 사용하여 페이지의 메타 데이터를 설정할 수 있다. 이 메타 데이터에는 레이아웃(layout), 미들웨어(middleware), 캐시 설정(cache) 등 여러 설정이 포함될 수 있다.

✅ 기본 문법

<script setup>
definePageMeta({
  layout: 'default' // 사용할 레이아웃 지정
});
</script>

 

이런식이라죠.

 

layouts 를 만들어주고,

 

<template>
  <div id="wrap">
    <Header />
    <section id="container">
      <slot />
    </section>
    <Footer />
  </div>
</template>

<script setup>
import Header from '~/components/Header.vue'
import Footer from '~/components/Footer.vue'
</script>

 

 

 

헤더, 푸터도 

<template>
  <footer id="footer">
    <p class="copy">Copyright 2025 K3.</p>
  </footer>
</template>

 

만들어주면 끝이다!