[VueJS] Nuxt3 설치 및 layouts, pages 적용(compositionAPI)

프로젝트 설치

npx nuxi init <project-name>

공식문서에 나와 있는 설치 방법으로 설치를 하면 이렇게 생성이 된다.

nuxt2에서는 설치 시 기본적인 디렉터리들을 생성해줬었는데 nuxt3는 없다.

처음 설치하고 봤을 때 조금 당황...

 

공식문서를 봐보면 layouts 규칙 적용 방법이 여러가지로 보이는데 nuxt2와 같은 형식으로 빠르게 적용 방법만 작성

 

layouts, pages 디렉터리 생성

먼저 app.vue는 삭제해버린 후 layouts, pages 디렉터리를 추가한다.

layouts

layouts 디렉터리 안에 기본 레이아웃 용 파일로 default.vue와 테스트를 위해 sub.vue 파일을 생성 후 아래와 같이 소스코드 작성

//default.vue
<script setup lang="ts"></script>
<template>
  <div>default.vue</div>
  <slot />
</template>

//sub.vue
<script setup lang="ts"></script>
<template>
  <div>sub.vue</div>
  <slot />
</template>

pages 디렉터리 안에 있는 파일들은 해당되는 레이아웃 파일 안에 slot 부분으로 들어가진다.

nuxt2에서는 slot대신 nuxt를 넣어줬었다.

pages

pages 디렉터리 안에 기본 레이아웃 사용과 루트 경로 파일로 사용할 index.vue 파일과 sub 레이아웃 확인용 sub.vue 파일 생성 후 아래와 같이 소스코드 작성

//index.vue
<script setup lang="ts"></script>
<template>index.vue</template>

//sub.vue
<script setup lang="ts">
import { ref } from 'vue';
definePageMeta({
  layout: 'sub',
});
const text = ref('sub page!');
</script>
<template>{{ text }}</template>

definePageMeta를 이용해 레이아웃 파일을 지정해주면 된다.

기존에 nuxt2에서는

이렇게 export default안에 layout속성을 이용해 레이아웃을 지정했는데 nuxt3에서 compositionAPI 방식에서는 definePageMeta를 이용해 지정하면 된다.

---

localhost:3000 접속 시 layouts/dafault.vue와 pages/index.vue가 출력된 모습

 

localhost:3000/sub 접속 시 layouts/sub.vue와 pages/sub.vue가 출력된 모습

---

공식문서 layouts 내용

https://nuxt.com/docs/guide/directory-structure/layouts#layouts-directory

layouts/ · Nuxt Directory Structure