[Nuxt] Layout 적용하기

Nuxt에서 Layout 적용하기

방법1. 각페이지에 layout 설정

처음에 각 페이지에 layout을 씌우는 방식으로 layout을 설정했다. 
그랬더니 sideBar의 메뉴를 클릭할 때마다 새로고침이 되어서 슬라이딩 애니메이션이 뚝뚝 끊기고 잘 동작하지 않았다.

각각의 페이지마다 NustLayout을 씌우는 방법

// pages/about.vue
<template>
	<NuxtLayout :name='layout'>
		<h1>about</h1>
	</NuxtLayout>
</template>

<script>
const layout = 'layout'
</script>

// layouts/layout.vue

<template>
  	<div class="layout">
    	<SideNav />
        <div class="content">
              <HeaderBar />
              <main>
                    <slot />  // page가 들어갈 부분
              </main>
        </div>
  	</div >
</template>
<script>
export default {
	layout: "layout",
};
</script>
<style>
...
</style>

 

이 방법은 각각의 페이지마다 `<NuxtLayout>` 을 씌워주어야 하는 방법이다.
그리고 새로고침될때 마다 해당페이지 내부 <NuxtLayout> 또한 새로고침이 되어 페이지 이동 중에 애니메이션이 있을 경우 애니메이션이 뚝뚝 끊기는 문제가 있다.

방법2. app.vue 에 layout 설정

그래서 다른 방법을 검색해 본 경과 app.vue에 NuxtPage에 NuxtLayout을 씌우는 방법이 있었다.
다음방법을 사용한 결과 애니메이션이 끊기지 않고 잘 동작했다.

 

app.vue에 NuxtPage 에 NuxtLayout을 씌우는 방법

// layouts/default.vue 
// default로 폴더 이름을 설정하면 default값으로 해당 layout이 사용된다.
<template>
  <div class="layout">
    <SideNav />
    <div class="content">
      <HeaderBar />
      <main>
		<slot />
      </main>
    </div>
  </div >
</template>
<script>
export default {
	layout: "default",
};
</script>

// app.vue
<template>
	<NuxtLayout>
		<NuxtPage />
	</NuxtLayout>
</template>

// pages/about.vue
<template>
		<h1>about</h1>
</template>

<script>
</script>

 

이 방법을 이용하면 각각의 페이지에 layout을 설정해주지 않아도 자동으로 적용이된다.

 

만약 다른 페이지에서 다른 layout을 사용하고 싶다면 해당페이지에 layout을 설정해 주면 된다. 

 

<script setup>
definePageMeta({
	layout: "header", // layouts/header.vue
});
</script>