app.vue

기본적으로 Nuxt는 이 파일을 진입점으로 처리하며 애플리케이션의 모든 경로에 대해 그 내용을 렌더링합니다.

<template>
  <div>
   <h1>홈페이지에 오신 것을 환영합니다</h1>
  </div>
</template>

컴포넌트

대부분의 컴포넌트는 버튼이나 메뉴와 같은 사용자 인터페이스의 재사용 가능한 조각입니다. Nuxt에서는 components/ 디렉토리에 이러한 컴포넌트를 생성할 수 있으며, 명시적으로 임포트하지 않아도 애플리케이션 전반에서 자동으로 사용할 수 있습니다.

<template>
  <div>
    <h1>홈페이지에 오신 것을 환영합니다</h1>
    <AppAlert>
      이것은 자동으로 임포트된 컴포넌트입니다.
    </AppAlert>
  </div>
</template>

페이지

페이지는 각 특정 경로 패턴에 대한 뷰를 나타냅니다. pages/ 디렉토리의 각 파일은 그 내용을 표시하는 다른 경로를 나타냅니다.

페이지를 사용하려면 pages/index.vue 파일을 생성하고 app.vue에 <NuxtPage /> 컴포넌트를 추가하세요 (또는 기본 진입점으로 app.vue를 제거하세요). 이제 pages/ 디렉토리에 새 파일을 추가하여 더 많은 페이지와 해당 경로를 생성할 수 있습니다.

<template>
  <div>
    <h1>홈페이지에 오신 것을 환영합니다</h1>
    <AppAlert>
      이것은 자동으로 임포트된 컴포넌트입니다
    </AppAlert>
  </div>
</template>

레이아웃

레이아웃은 여러 페이지에 공통된 사용자 인터페이스를 포함하는 페이지를 감싸는 래퍼입니다. 예를 들어 헤더와 푸터가 있습니다. 레이아웃은 페이지 콘텐츠를 표시하기 위해 <slot /> 컴포넌트를 사용하는 Vue 파일입니다. layouts/default.vue 파일이 기본적으로 사용됩니다. 사용자 정의 레이아웃은 페이지 메타데이터의 일부로 설정할 수 있습니다.

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

더 많은 레이아웃을 생성하고 페이지에서 사용하는 방법에 대해 알아보려면 레이아웃 섹션에서 더 많은 정보를 찾을 수 있습니다.

고급: HTML 템플릿 확장

Nitro 플러그인을 추가하여 후크를 등록함으로써 HTML 템플릿에 대한 완전한 제어를 가질 수 있습니다. render:html 후크의 콜백 함수는 클라이언트로 전송되기 전에 HTML을 변경할 수 있게 해줍니다.

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:html', (html, { event }) => {
    // 이 객체는 html 템플릿의 표현입니다.
    console.log(html)
    html.head.push(`<meta name="description" content="My custom description" />`)
  })
  // 여기에서 응답을 가로챌 수도 있습니다.
  nitroApp.hooks.hook('render:response', (response, { event }) => { console.log(response) })
})