Nuxt3 directory structure

본론

디렉토리구조

 

Nuxt는 Auto import라는 기능이 있어서 해당 파일에서 import * from "*" 이런 행위를 안해도 됩니다.

assets, public

assets/

이 디렉토리에서는 주로 아래와 같은 것을 포함합니다.

• Stylesheets (CSS, SASS, etc.)
• Fonts
• Client에서만 제공되는 이미지 파일입니다.

서버쪽에서 받고 싶다면 public/ 디렉토리에 넣으시면 됩니다.

 

public/

이 디렉토리는 주로 이름을 유지하거나 변경되지 않을 가능성이 있는 파일을 넣습니다.

• Favicon
• robots.txt
• Image files

두 개의 차이는 딱 이정도로 나눌 수 있고

(http://localhost:3000/test.jpeg) assets은 이런식으로 볼 수 없지만 public에 저장된 이미지 파일은 서버에 저장이 되어서 웹에서 직접 볼 수가 있습니다.

 

components

components/

이 디렉토리는 재사용이 가능한 컴포넌트를 저장하는 곳입니다.

components/
  -Avatar.vue
  -Input/
    -index.vue
    -Button.vue
  -Base/
    -Foo/
      -Text.vue

위와 같이 디렉토리를 설정할 수 있습니다.

 

<template>
  <Avatar /> 
  <Input />
  <InputButton />
  <BaseFooText />
</template>

이런식으로 불러 올 수 있습니다.

 

composables

Use the composables/ directory to auto-import your Vue composables into your application.

이렇게 나와있는데 간단하게 말해서는 재사용 가능한 hook을 만드는 곳이라고 생각하면 될 것같습니다.

composables에 관한 페이지

 

layout

layout/

레이아웃에 관한 디렉토리 입니다. layout/default.vue 이런식으로 기본 레이아웃을 지정하고 사용합니다.

다른 디렉토리의 index.vue와 헷갈리지 않으시면 됩니다.

<template>
  <div>
    <p>모든 페이지에 기본이 되는 layout 페이지 입니다.</p>
    <slot />
  </div>
</template>

아래는 사용자 지정 custom layout 사용법입니다.

layouts/
  -default.vue
  -custom.vue

<script setup lang="ts">
  definePageMeta({
    layout: 'custom'
  })
</script>

 

pages

pages/

Nuxt의 pages 디렉토리는 애플리케이션의 라우트와 연결된 Vue 페이지 컴포넌트를 저장하는 곳입니다. 파일 이름이 라우트 경로가 됩니다. Next.js를 해보신 분은 금방 이해하실 수 있습니다.

pages/
  -index.vue -- Home page
  -profile.vue -- /profile page
  -profile-[id].vue /profile-[id] id는 해당 페이지의 params로 받을 수 있습니다.
  -login/
    -index.vue /login page

next.js에서는 디렉토리의 page.tsx가 기본이라면 nuxt에서는 디렉토리의 index.vue가 기본이 됩니다.

pages디렉토리

 

정리

Nuxt를 설치하고 첫 실행시 app.vue에 <NuxtWelcome />이라는 것이 있습니다. 웹 페이지에서 nuxt에 웹사이트 소개를 해주는 곳입니다.

처음 시작 했을 때는,

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

app.vue 파일에 이렇게 넣고 시작하시면 됩니다. 참고로 pages/index.vue와 layouts/default.vue를 미리 만드시고 하시면 됩니다.

 

추가적으로, middleware, plugins, modules 등 다양한 디렉토리가 있습니다. 하지만 이런 디렉토리는 공식홈페이지를 보고 느끼는 것이 더 중요하고 제가 아직 이해를 못해서 올리지 못했습니다 ㅠㅠ 다음에 이해가 되고 사용을 하게 되면 그때 다시 올리겠습니다.