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