app.vue
app.vue 파일은 Nuxt 애플리케이션의 메인 컴포넌트입니다.
pages/ 디렉토리가 있다면, app.vue 파일은 선택 사항입니다. Nuxt는 기본 app.vue를 자동으로 포함하지만, 필요에 따라 구조와 내용을 커스터마이즈하기 위해 직접 추가할 수도 있습니다.사용법
최소 사용법
Nuxt에서는 pages/ 디렉토리가 선택 사항입니다. 이 디렉토리가 없으면 Nuxt는 vue-router 의존성을 포함하지 않습니다. 이는 랜딩 페이지나 라우팅이 필요 없는 애플리케이션을 만들 때 유용합니다.
app.vue
<template>
<h1>Hello World!</h1>
</template>
Read and edit a live example in Docs > Examples > Hello World.
Pages와 함께 사용하기
pages/ 디렉토리가 있을 때는, 현재 페이지를 표시하기 위해 <NuxtPage> 컴포넌트를 사용해야 합니다:
app.vue
<template>
<NuxtPage />
</template>
또한, app.vue에서 애플리케이션의 공통 구조를 직접 정의할 수도 있습니다. 이는 헤더나 푸터와 같은 전역 요소를 포함하고 싶을 때 유용합니다:
app.vue
<template>
<header>
Header content
</header>
<NuxtPage />
<footer>
Footer content
</footer>
</template>
app.vue는 Nuxt 애플리케이션의 메인 컴포넌트 역할을 한다는 점을 기억하세요. 여기에 추가하는 모든 것(JS와 CSS)은 전역적으로 적용되어 모든 페이지에 포함됩니다.레이아웃과 함께 사용하기
애플리케이션에서 페이지마다 다른 레이아웃이 필요할 때는, layouts/ 디렉토리와 <NuxtLayout> 컴포넌트를 사용할 수 있습니다. 이를 통해 여러 레이아웃을 정의하고 페이지별로 적용할 수 있습니다.
app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>