뷰
app.vue
기본적으로 Nuxt는 이 파일을 엔트리포인트로 취급하며, 애플리케이션의 모든 라우트에 대해 이 파일의 내용을 렌더링합니다.
<template>
<div>
<h1>Welcome to the homepage</h1>
</div>
</template>
main.js(일반적으로 Vue 앱을 생성하는 파일)가 어디 있는지 궁금할 수 있습니다. Nuxt는 이를 내부적으로 처리합니다.컴포넌트
대부분의 컴포넌트는 버튼과 메뉴처럼 사용자 인터페이스의 재사용 가능한 조각입니다. Nuxt에서는 이러한 컴포넌트를 app/components/ 디렉터리에 생성할 수 있으며, 명시적으로 임포트하지 않아도 애플리케이션 전체에서 자동으로 사용할 수 있습니다.
<template>
<div>
<h1>Welcome to the homepage</h1>
<AppAlert>
This is an auto-imported component.
</AppAlert>
</div>
</template>
<template>
<span>
<slot />
</span>
</template>
페이지
페이지는 각 특정 라우트 패턴에 대한 뷰를 나타냅니다. app/pages/ 디렉터리의 모든 파일은 자신의 내용을 표시하는 서로 다른 라우트를 나타냅니다.
페이지를 사용하려면 app/pages/index.vue 파일을 생성하고 app/app.vue에 <NuxtPage /> 컴포넌트를 추가하세요(또는 기본 엔트리를 사용하려면 app/app.vue를 제거하세요). 이제 app/pages/ 디렉터리에 새 파일을 추가하여 더 많은 페이지와 해당 라우트를 생성할 수 있습니다.
<template>
<div>
<h1>Welcome to the homepage</h1>
<AppAlert>
This is an auto-imported component
</AppAlert>
</div>
</template>
<template>
<section>
<p>This page will be displayed at the /about route.</p>
</section>
</template>
레이아웃
레이아웃은 여러 페이지에 공통으로 사용되는 사용자 인터페이스(예: 헤더와 푸터 표시)를 포함하는, 페이지를 감싸는 래퍼입니다. 레이아웃은 페이지 내용을 표시하기 위해 <slot /> 컴포넌트를 사용하는 Vue 파일입니다. app/layouts/default.vue 파일이 기본적으로 사용됩니다. 커스텀 레이아웃은 페이지 메타데이터의 일부로 설정할 수 있습니다.
<NuxtPage />가 포함된 app/app.vue를 대신 사용하는 것을 권장합니다.<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
<template>
<div>
<AppHeader />
<slot />
<AppFooter />
</div>
</template>
<template>
<div>
<h1>Welcome to the homepage</h1>
<AppAlert>
This is an auto-imported component
</AppAlert>
</div>
</template>
<template>
<section>
<p>This page will be displayed at the /about route.</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="My custom description" />`)
})
// 여기에서 응답을 가로챌 수도 있습니다.
nitroApp.hooks.hook('render:response', (response, { event }) => { console.log(response) })
})