뷰(Views)
app.vue
기본적으로 Nuxt는 이 파일을 진입점으로 간주하며, 애플리케이션의 모든 라우트에 대해 해당 내용을 렌더링합니다.
<template>
<div>
<h1>홈페이지에 오신 것을 환영합니다</h1>
</div>
</template>
main.js 파일(일반적으로 Vue 앱을 생성하는 파일)이 어디 있는지 궁금할 수 있습니다. Nuxt는 이 작업을 내부적으로 처리합니다.컴포넌트(Components)
대부분의 컴포넌트는 버튼이나 메뉴와 같은 사용자 인터페이스의 재사용 가능한 조각입니다. Nuxt에서는 components/ 디렉토리에 이러한 컴포넌트를 생성할 수 있으며, 명시적으로 import하지 않아도 애플리케이션 전역에서 자동으로 사용할 수 있습니다.
<template>
<div>
<h1>홈페이지에 오신 것을 환영합니다</h1>
<AppAlert>
이 컴포넌트는 자동으로 import되었습니다.
</AppAlert>
</div>
</template>
<template>
<span>
<slot />
</span>
</template>
페이지(Pages)
페이지는 각 특정 라우트 패턴에 대한 뷰를 나타냅니다. pages/ 디렉토리의 모든 파일은 서로 다른 라우트를 나타내며 해당 내용을 표시합니다.
페이지를 사용하려면 pages/index.vue 파일을 생성하고 app.vue 파일에 <NuxtPage /> 컴포넌트를 추가하세요(또는 기본 진입점을 사용하려면 app.vue를 제거하세요). 이제 pages/ 디렉토리에 새 파일을 추가하여 더 많은 페이지와 해당 라우트를 만들 수 있습니다.
<template>
<div>
<h1>홈페이지에 오신 것을 환영합니다</h1>
<AppAlert>
이 컴포넌트는 자동으로 import되었습니다
</AppAlert>
</div>
</template>
<template>
<section>
<p>이 페이지는 /about 라우트에서 표시됩니다.</p>
</section>
</template>
레이아웃(Layouts)
레이아웃은 여러 페이지에 공통된 사용자 인터페이스(예: 헤더와 푸터 표시)를 포함하는 페이지의 래퍼입니다. 레이아웃은 페이지 내용을 표시하기 위해 <slot /> 컴포넌트를 사용하는 Vue 파일입니다. 기본적으로 layouts/default.vue 파일이 사용됩니다. 사용자 지정 레이아웃은 페이지 메타데이터의 일부로 설정할 수 있습니다.
app.vue에서 <NuxtPage />와 함께 사용하는 것을 권장합니다.<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
<template>
<div>
<AppHeader />
<slot />
<AppFooter />
</div>
</template>
<template>
<div>
<h1>홈페이지에 오신 것을 환영합니다</h1>
<AppAlert>
이 컴포넌트는 자동으로 import되었습니다
</AppAlert>
</div>
</template>
<template>
<section>
<p>이 페이지는 /about 라우트에서 표시됩니다.</p>
</section>
</template>
더 많은 레이아웃을 만들고 페이지에서 사용하는 방법을 알아보려면 레이아웃 섹션에서 자세한 정보를 확인하세요.
고급: HTML 템플릿 확장하기
<head>만 수정하면 되는 경우, SEO 및 메타 섹션을 참고하세요.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="나만의 설명" />`)
})
// 여기서 응답을 가로챌 수도 있습니다.
nitroApp.hooks.hook('render:response', (response, { event }) => { console.log(response) })
})