app.vue

최소 사용량

Nuxt 3에서는 pages/ 디렉토리가 선택 사항입니다. 존재하지 않으면 Nuxt는 vue-router 종속성을 포함하지 않는다. 이는 라우팅이 필요하지 않은 랜딩 페이지나 애플리케이션 작업 시 유용하다.

 

app.vue

<!--
app.vue
-->

<template>
  <h1>Hello World!</h1>
</template>

 

페이지 사용

pages/ 디렉토리가 있는 경우 현재 페이지를 표시하려면 <NuxtPage> 컴포넌트를 사용한다.

 

app.vue

<!--
app.vue
-->

<template>
  <div>
    <NuxtLayout>
      <NuxtPage/>
    </NuxtLayout>
  </div>
</template>

 

<NuxtPage>
내부적으로 Vue의 <Suspense> 컴포넌트를 사용하므로 루트 요소로 설정할 수 없다.

app.vue 가 Nuxt 애플리케이션의 주요 구성 요소 역할을 한다는 점을 기억하자. 여기에 추가하는 모든 항목(JS 및 CSS)은 전역적으로 적용되며 모든 페이지에 포함된다.

페이지 사이의 페이지 주변 구조를 사용자 정의할 수 있는 가능성을 갖고 싶다면 layouts/ 디렉토리를 확인한다.