[Nuxt3] nuxt 설치와 폴더구성, 폴더별 네이밍 컨벤션

install

Nuxt 프로젝트를 시작하려면 아래 명령어를 실행하세요.

npx nuxi init 프로젝트명

최신 버전을 설치하려면 아래 명령어를 사용합니다.

npx nuxi@latest init 프로젝트명 

명령어 입력 후 입맛에 맞게 이것 저것 옵션 설정을 완료하면 아래와 같은 기본 폴더 구조가 생성됩니다.

Nuxt 2는 설치 시 기본 폴더 구조가 생성되지만, Nuxt 3는 최소한의 폴더만 제공되므로 직접 필요한 폴더를 생성해 나가야 합니다...!
하나씩 알아보겠습니다

Vue와 Nuxt의 폴더구조 비교

Nuxt 폴더 구조

공식문서의 디렉터리 구조를 참고하여 에서 주요 폴더를 간략히 정리한 내용입니다.

• .nuxt
  Nuxt 애플리케이션을 빌드한 결과물이 저장되는 폴더입니다.

• assets
  웹사이트에서 사용되는 에셋 파일(CSS, SASS, 폰트 등)을 저장하는 폴더입니다.
  이 폴더의 파일은 빌드 도구에 의해 처리됩니다.
  assets 폴더는 public 폴더와는 다르게 브라우저에서 직접 접근되지 않습니다.

• components
  모든 뷰 컴포넌트가 위치하는 폴더입니다.
  Nuxt는 components/경로에 있는 파일컴포넌트를 자동으로 import 합니다

• composables
  재사용 가능한 함수를 저장하는 폴더입니다.
  composables/ 경로의 함수도 자동으로 import 됩니다.

• layouts
  애플리케이션의 공통 레이아웃 컴포넌트를 정의하는 폴더입니다.

• middleware
  페이지를 렌더링하기 전에 실행되는 함수 파일을 저장하는 폴더입니다.

• pages
  라우트와 연결된 페이지 컴포넌트를 저장하는 폴더입니다.
  Nuxt는 pages/ 폴더의 파일 구조를 기반으로 라우트를 자동으로 생성합니다.

• public
  정적 파일을 저장하는 폴더입니다.
  public/에 저장된 파일은 빌드 과정 없이 브라우저에서 직접 접근할 수 있습니다.

폴더별 파일명 네이밍 컨벤션

1. components/ 폴더 → PascalCase (파스칼 케이스)

Vue의 컴포넌트는 HTML 태그처럼 사용할 수 있는데, PascalCase를 사용하면 태그와의 구별이 쉬워집니다.

<MainHome />
<UserProfile />
<ProductCard />

components/
 ├── HeaderNav.vue
 ├── FooterSection.vue
 ├── ProductList.vue
 ├── UserCard.vue

2. composables/ 폴더 → camelCase (카멜 케이스)

함수 네이밍 규칙을 따르는 것이 일반적입니다.

useAuth.ts → useAuth()
useFetchData.ts → useFetchData()

composables/
 ├── useAuth.ts
 ├── useUser.ts
 ├── useFetchData.ts

3. layouts/ 폴더 → kebab-case (케밥 케이스)

Nuxt가 자동으로 인식하는 default.vue, error.vue 등의 파일이 포함되므로 케밥 케이스를 사용하는 것이 일반적입니다.

<!-- layouts/default.vue -->
<template>
  <div>
    <HeaderNav />
    <slot />
    <FooterSection />
  </div>
</template>

layouts/
 ├── default.vue
 ├── error.vue
 ├── dashboard.vue

4. pages/ 폴더 → kebab-case (케밥 케이스)

Nuxt의 파일 기반 라우팅 시스템을 활용하기 위해 URL과 동일한 형식으로 파일을 작성하는 것이 일반적입니다.

pages/main/mainWelcome.vue처럼 카멜 케이스를 쓰면 라우트가 main/mainWelcome이 되어 어색함.
pages/main/welcome.vue처럼 케밥 케이스를 쓰면 라우트가 main/welcome이 되어 깔끔함.

pages/
 ├── index.vue          → `/`
 ├── about.vue          → `/about`
 ├── contact.vue        → `/contact`
 ├── product/index.vue  → `/product`
 ├── product/details.vue → `/product/details`

5. assets/, public/ 폴더 → kebab-case (케밥 케이스)

이미지, CSS, 폰트 등의 파일이 들어가는 폴더이므로, URL과 호환되기 쉽게 케밥 케이스를 사용합니다.

 ├── css/global.css
 ├── images/logo.svg
 ├── images/user-avatar.png\

정리

• components/ → MainHome.vue (PascalCase)
• layouts/, pages/, middleware/ → default.vue, product/my-details.vue (kebab-case)
• composables/, store/ → useAuth.ts, useUserStore.ts (camelCase)
• assets/, public/ → logo-white.svg, global.css (kebab-case)