- .nuxt : 프로젝트 빌드 시 결과
- assets : 이미지, CSS
- components
- layouts : page 레이아웃의 최상위 컴포넌트
- middleware : SSR 시에 서버에서 브라우저로 파일을 넘기기 전에 실행시키는 기능들
- pages : 페이지 별 컴포넌트
- plugins : 뷰 인스턴스를 생성하기 전에 실행하는 라이브러리 등(참조)
- static : 빌드 시 변경이 필요하지 않은 정적 자원들
- store : vuex store

파일 기반의 자동 라우팅 생성

pages
|_ index.vue : localhost:3000
|_ main.vue : localhost:3000/main

pages 디렉토리 내부의 component 이름대로 url이 만들어진다.

이 때 페이지 작성의 기본은 layouts 폴더 안의 default.vue에서부터 나온다.

// layouts/default.vue

<template>
  **<Nuxt/>**   
</template>

<script>
export default {
  name:"defaultView"
}
</script>

.nuxt에서 router.js 파일을 보면, 실제로 pages 안의 컴포넌트 이름별로 라우팅이 되어 있는 것을 볼 수 있다.

// .nuxt/router.js

...
export const routerOptions = {
  mode: 'history',
  base: '/',
  linkActiveClass: 'nuxt-link-active',
  linkExactActiveClass: 'nuxt-link-exact-active',
  scrollBehavior,

  routes: [{
    path: "/main",
    component: _8887476e,
    name: "main"
  }, {
    path: "/",
    component: _c577ee1c,
    name: "index"
  }],

  fallback: false
}

...

레이아웃 컴포넌트를 사용하는 이유

layouts > default.js에서의 Nuxt 태그가 바로 기본적으로 pages 안의 컴포넌트에 해당한다. 따라서 이 layouts 폴더는 전체적인 큰 그림에서의 레이아웃을 지정해줄 수 있다. 즉, 각 페이지별로 공통적으로 사용하는 요소들을 layouts > default.vue에서 지정하여 사용할 수 있다.

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

이런 식이나,

<template>
  <div>
    **<h1>{{$route.name}} page</h1>**
    <Nuxt/>   
  </div>
  
</template>

<script>
export default {
  name:"defaultView",
  created() {
    console.log(this.$route)  // 해당 라우트의 정보가 담겨져 나온다.
  }
}
</script>

이런 식으로.

에러 페이지 정의 방법

layouts > error.vue를 만들어 공통적인 에러 페이지를 리다이렉트 할 수 있다. 즉, 공통 에러 페이지는 페이지 레벨의 컴포넌트로 구성된다는 것을 알 수 있다.