app.vue
app.vue 파일은 Nuxt 애플리케이션의 주요 컴포넌트입니다.
pages/ 디렉토리가 있는 경우, app.vue 파일은 선택 사항입니다. Nuxt는 기본 app.vue를 자동으로 포함하지만, 필요에 따라 구조와 내용을 사용자 정의하기 위해 직접 추가할 수 있습니다.
사용법
최소 사용법
Nuxt에서는 pages/ 디렉토리가 선택 사항입니다. 이 디렉토리가 없으면, Nuxt는 vue-router 의존성을 포함하지 않습니다. 이는 라우팅이 필요 없는 랜딩 페이지나 애플리케이션을 구축할 때 유용합니다.
app.vue
<template>
<h1>Hello World!</h1>
</template>
샘플 코드 편집 및 미리보기examples > hello-world
페이지와 함께 사용하기
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>
※이 페이지는 Nuxt.js 공식 문서의 비공식 번역 페이지입니다.
공식 문서의 해당 페이지는 여기 있습니다:
https://nuxt.com/docs/3.x/guide/directory-structure/app