디렉토리 구조
2022년 9월 기준 디렉토리 구조는 아래의 이미지와 같습니다.
20개라는 수가 부담스럽지만, 하나하나 확인해보겠습니다.
app.vue
app.vue 는 Nuxt3 앱의 메인 컴포넌트입니다.
라우팅 기능과 pages의 사용은 필수가 아니기 때문에 ,
순수하게 app.vue를 다음과 같이 사용할 수 있습니다.
<template>
<h1>Hello World</h1>
</template>
만약 pages 디렉토리를 구성했다면, 다음과 같이 사용할 수 있습니다.
~/pages/index.vue
<template>
<div>
텍스트
</div>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>app.vue
<template>
<div>
<NuxtPage/>
</div>
</template>
app.vue 가 메인 컴포넌트라는걸 명심해야 합니다.
app.vue 에 추가하는 스크립트나 CSS 는 전역적으로 적용됩니다.
layouts
Nuxt는 layouts 디렉토리를 이용해 앱 전체에서 사용할 수 있는 레이아웃을 커스터마이징 할 수 있게 지원합니다.
UI 와 코드 패턴을 재사용하는데 이상적입니다.
레이아웃은 layouts 디렉토리에 위치하며, 자동 import 되어 사용되어집니다.
레이아웃의 사용법은 app.vue 에 <NuxtLayout> 을 추가하는 것입니다.
레이아웃 명명에는 보통 케밥 케이스가 사용됩니다.
예를 들어, someLayout -> some-layout 이 됩니다.
만약 레이아웃이 하나밖에 없는 앱이라면 layouts 디렉토리를 사용하지 말고, app.vue 만을 사용하는 것을 권장합니다.
다음은 간단한 사용 예입니다.
<NuxtLayout> 은 default 로 ~/layouts/default.vue 를 import 합니다.
~/layouts/default.vue
<template>
<div>
Layout은 모든 페이지에서 공유됩니다.
<br>
<slot/>
</div>
</template>
<script>
export default {
name: "default"
}
</script>
<style scoped>
</style>app.vue
<template>
<div>
<NuxtLayout>
slot 을 임의의 문장으로 채워봅시다.
</NuxtLayout>
</div>
</template>
default 레이아웃이 아닌 레이아웃을 지정해서 사용해보겠습니다.
~/layouts/layout-one.vue
<template>
<div>
Layout-One 레이아웃입니다.
<br>
<slot/>
</div>
</template>
<script>
export default {
name: "layout-one"
}
</script>
<style scoped>
</style>app.vue
<template>
<div>
<NuxtLayout :name="layoutName">
slot 을 임의의 문장으로 채워봅시다.
</NuxtLayout>
</div>
</template>
<script setup>
const layoutName = "layout-one"
</script>
이제 응용하여 동적으로 레이아웃을 변경해보겠습니다.
.nuxt
개발 모드로 Nuxt3 앱을 실행할 때 해당 디렉토리에 Nuxt3 앱이 생성됩니다.
.output
운영 모드로 Nuxt3 앱을 실행할 때 해당 디렉토리에 Nuxt3 앱이 생성됩니다.
Asseets