[Vue] 레이아웃 커스텀 페이지 만들기

참고 https://ko.nuxtjs.org/docs/2.x/directory-structure/layouts

Layouts directory

기본적인 디폴트 페이지 (default.vue)

이 default 페이지에 아래처럼 <template> 태그로 감싸주고

안에 중요한 메인인 <Nuxt /> 태그를 넣어주면 레이아웃이 자동으로 잡힌다 :)

<template>
  <div>
    <TheHeader />
    <Nuxt />
    <TheFooter />
  </div>
</template>

이번 글에 소개하고 싶은 커스텀 레이아웃 페이지는 아래와 같다

마찬가지로 Nuxt가 만들어준 layout 디렉터리에

커스텀 하고 싶은 파일을 만들어준다.

디폴트와 비슷한 형식으로 <template>에 <Nuxt>로 위치를 잡아준다

<template>
  <div>
  	<span>팝업 창입니다.</span>
  </div>
  <div id = "pop_container" class="con_side">
    <Nuxt />
  </div>
</template>

여기서 끝이 아니다.

이 팝업 레이아웃을 사용할 파일로 가 본다.

이제 이 파일의 레이아웃을 default가 아닌

popup.vue에서 커스텀 한 레이아웃을 사용해보도록 수정한다. 2가지 방법이 있다.

<script>
export default {
  layout: 'popup'
}
</script>

// 또는

<script>
export default {
  layout (context) {
    return 'popup'
  }
}
</script>