[ Nuxt ] layout 여러개 만들어 새로운 레이아웃 적용하기

** 본글은 nuxt에 대한 기본적인 설명이 없으므로 nuxt에 대해 알고계셔야 도움 될 내용입니다 !

 

 

nuxt의 디렉토리 중 

layouts에 대해 알게된 부분이 있어서 정리하고자 한다

 

defalut만 아니라 다른 형태의 layout도 사용이 가능 하다는점!

전역으로 사용하는 컴포넌트가 있어서 이걸 어떻게 빼야하나 싶었는데..

 

또다른 layout용 vue파일을 만들어서 그 파일에 빼고싶은 컴포넌트를 빼고 정의해주고 사용하면 되겠지 🤤

 

일단 layouts은 아래와 같은 형태로 사용하며

vue에서 app.vue 처럼 화면의 base가 되는 부분이다.

<Nuxt />에 해당하는 위치에 page며 conponent들이 불려와서 뿌려진다.

layouts > defalut.vue

<template>
  <div id="app">
    <Header />
    <Nuxt />
    <Footer />
  </div>
</template>


<script>
import Header from '../header.vue'
import Footer from '../footer.vue'
export default {
  components: {Header,Footer}
}
</script>

 

layouts > error.vue

layout의  error.vue 파일은 위의 layouts > default.vue 파일처럼 컴포넌트들로 위치를 지정해주는것이 아닌 

(이 레이아웃은 특수한 케이스로 템플릿 안에 컴포넌트를 포함하면 안된다고 함)

일반 page 파일처럼 보여주고 싶은 형태로 오류 페이지를 꾸며주면

오류(404, 500 등)가 발생하였을때 알아서 그 화면을 보여준다고한다.

 

 

layouts > newLayout.vue

커스텀 layout 파일 사용하기 → 이름은 아무거나 지어도 됨 : ) 

 

또는 커스텀으로 사용한다면 default.vue처럼 원하는 컴포넌트들로

배치하고 구성하여 파일을 만들어 사용한다.

 

아래의 예시에서는 header와 footer가 없는 형태의 새로운 레이아웃을 만들어보았다.

<template>
  <div id="app">
    <Nuxt />
  </div>
</template>

 

새로운 레이아웃  사용하기 

 

그리고 위의 새로운 layout파일을 사용할때는 아래와 같이 사용한다

 

위에서 설명한 바와 같이 layout을 따로 설정하지 않을경우는

dafalut.vue파일이 레이아웃에 사용된다!!

 

ex ) test.vue newLayout.vue 을 사용할 경우

.
.
.
<script>
export default {
  layout: 'newLayout',
  // 또는
  loyout(context) {
    layout 'newLayout'
  }
}
</script>

 

 

---

✔︎ 참고

yilpe93.github.io/vue/nuxt-directory-guide/