app.vue가 애플리케이션의 최상위 UI와 공통 구조를 정의하는 방식을 배웁니다.
Nuxt의 app.vue는 모든 경로를 감싸는 루트 컴포넌트입니다. 작은 앱은 여기서 시작할 수 있고 pages를 사용하면 NuxtPage를 배치합니다.
전역 레이아웃 책임만 두고 개별 기능 상태와 큰 데이터 요청은 하위 페이지와 컴포넌트로 이동합니다.
Nuxt의 auto-import는 Vue API와 Nuxt composable을 import 없이 사용할 수 있지만 출처를 이해해야 합니다.
app.vue에 모든 페이지 로직을 누적하면 경로별 코드 분할과 책임 구분이 약해집니다.
로컬 프로젝트에서 확인해보세요공통 footer와 현재 연도를 추가하세요.
<script setup>
const title = "Nuxt 학습 대시보드";
</script>
<template>
<main>
<header>
<h1>{{ title }}</h1>
</header>
<p>app.vue에서 시작합니다.</p>
</main>
</template>