Views
Nuxt.js 어플리케이션의 특정 라우트를 위해 데이터와 뷰를 설정하는 모든 것을 설명합니다. (Document, Layouts, Pages와 HTML Head)
1. Documents
html 템플릿을 확장하기 위해서 당신의 프로젝트에 app.html 파일을 생성합니다.
기본 템플릿입니다.
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>2. Layout
Nuxt.js를 사용하면 layouts 폴더에 레이아웃을 추가함으로써 메인 레이아웃을 확정하거나 사용자 정의 레이아웃을 만들 수 있습니다.
기본 레이아웃
메인 레이아웃을 확장하려면 layouts/default.vue 파일을 추가합니다.
<template>
<nuxt/>
</template>에러 페이지
에러 페이지를 커스터마이징하려면 layouts/error.vue 파일을 추가합니다.
이 레이아웃은 <nuxt/> 태그를 포함하지 않습니다.
<template>
<div class="container">
<h1 v-if="error.statusCode === 404">Page not found</h1>
<h1 v-else>An error occurred</h1>
<nuxt-link to="/">Home page</nuxt-link>
</div>
</template>
<script>
export default {
props: ['error'],
layout: 'blog' // you can set a custom layout for the error page
}
</script>사용자 정의 레이아웃
layouts 폴더에 있는 모든 파일(최상위 레벨)은 각 페이지 컴포넌트에 layout 속성으로 접근할 수 있습니다. 페이지 컴포넌트를 레이아웃하기 위해서 꼭 <nuxt/>태그를 작성하세요.
layouts/blog.vue:
<template>
<div>
<div>My blog navigation bar here</div>
<nuxt/>
</div>
</template>이제 pages.posts.vue에서 Nuxt.js로 커스텀 레이아웃을 사용한다고 전달합니다.:
<script>
export default {
layout: 'blog'
}
</script>3. Pages
모든 Page 컴포넌트는 Vue 컴포넌트입니다. 하지만 Nuxt.js는 범용 어플리케이션을 쉽게 개발할 수 있도록 특별한 키를 제공합니다.
