4. Views

Nuxt는 애플리케이션의 사용자 인터페이스를 구현하기 위한 여러 구성 요소 레이어를 제공한다.

기본적으로 Nuxt는 이 파일을 진입점 으로 처리 하고 애플리케이션의 모든 경로에 대한 콘텐츠를 렌더링한다.

<template>
  <div>
   <h1>Welcome to the homepage</h1>
  </div>
</template>

Vue에 익숙하다면 일반적으로 Vue 앱을 생성하는 main.js 파일이 어디에 있는지 궁금할 것이다. Nuxt는 이 작업을 백그라운드에서 수행한다.

컴포넌트

대부분의 컴포넌트, 버튼이나 메뉴와 같이 재사용 가능한 사용자 인터페이스다. Nuxt에서는 이러한 컴포넌트를 components/ 디렉터리에 생성할 수 있으며 명시적으로 임포트할 필요 없이 애플리케이션 전체에서 자동으로 사용할 수 있다.

<!-- 
app.vue : AppAlert 컴포넌트는 components/AppAlert.vue 에 정의되어 있다.
-->

<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <AppAlert>
      This is an auto-imported component.
    </AppAlert>
  </div>
</template>

<!--
components/AppAlert.vue
-->

<template>
  <span>
    <slot />
  </span>
</template>

페이지

페이지는 각 페이지에 대한 특정 경로를 나타낸다. pages/ 디렉터리의 모든 파일은 해당 내용을 표시하는 서로 다른 경로를 나타낸다.
페이지를 사용하려면 pages/index.vue파일을 생성하고 <NuxtPage />구성 요소를 app.vue 에 추가한다 (또는 기본 항목의 경우 app.vue 제거). 이제 pages/ 디렉터리에 새 파일을 추가하여 더 많은 페이지와 해당 경로를 만들 수 있다.

<!--
pages/index.vue
-->

<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <AppAlert>
      This is an auto-imported component
    </AppAlert>
  </div>
</template>

<!--
pages/about.vue
-->

<template>
  <section>
    <p>This page will be displayed at the /about route.</p>
  </section>
</template>

레이아웃

레이아웃은 머리글 및 바닥글 표시와 같은 여러 페이지에 대한 공통 사용자 인터페이스를 포함하는 페이지 주위의 래퍼이다. 레이아웃은 페이지 콘텐츠를 표시하기 위해 <slot /> 컴포넌트를 사용하는 Vue 파일이다. layouts/default.vue 파일이 기본적으로 사용된다. 사용자 정의 레이아웃은 페이지 메타데이터의 일부로 설정할 수 있다.

만약, 애플리케이션에 레이아웃이 하나만 있는 경우 <NuxtPage /> 와 함께 app.vue를 사용하는 것이 좋다.

<!--
layouts/default.vue
-->

<template>
  <div>
    <AppHeader />
    <slot />
    <AppFooter />
  </div>
</template>

<!--
pages/index.vue
-->

<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <AppAlert>
      This is an auto-imported component
    </AppAlert>
  </div>
</template>

<!--
pages/about.vue
-->

<template>
  <section>
    <p>This page will be displayed at the /about route.</p>
  </section>
</template>

더 많은 레이아웃을 만들고 이를 페이지에서 사용하는 방법을 알아보려면 레이아웃 섹션을 찾아보자.

고급 : HTML 템플릿 확장

힌트) <head>만 수정해야 하는 경우 SEO 및 메타 섹션을 참조.

후크를 등록하는 Nitro 플러그인을 추가하면 HTML 템플릿을 완벽하게 제어할 수 있다. 후크의 render:html 의 콜백함수 기능을 사용 하면 HTML이 클라이언트에 전송되기 전에 HTML을 변경할 수 있다.

// server/plugin/extend-html.ts

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:html', (html, { event }) => { 
    // This will be an object representation of the html template.
    console.log(html)
    html.head.push(`<meta name="description" content="My custom description" />`)
  })
  // You can also intercept the response here.
  nitroApp.hooks.hook('render:response', (response, { event }) => { console.log(response) })
})