Usage with NuxtJS

NuxtJS 프로젝트에 FSD(Feature-Sliced Design)를 도입할 때는 기본 구조와 FSD 원칙 간에 다음과 같은 차이를 고려해야 합니다:

• NuxtJS는 src 폴더 없이 project root에서 파일을 관리합니다.
• NuxtJS는 pages 폴더 기반 파일 라우팅을 사용하지만, FSD는 slice 관점에서 폴더를 구성합니다.

src 폴더 alias 설정하기

NuxtJS 프로젝트에도 src 폴더를 두고 싶다면, nuxt.config.ts의 alias에 매핑을 추가하세요.

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true }, // 개발 도구 활성화(선택 사항)
  alias: {
    "@": '../src' // root의 src 폴더를 @로 참조
  },
})

라우터 설정 방법 선택하기

NuxtJS에서는 두 가지 라우팅 방식을 지원합니다:

• 파일 기반 라우팅: src/app/routes 폴더 내 .vue 파일을 자동으로 라우트로 등록
• 설정 기반 라우팅: src/app/router.options.ts에서 라우트를 직접 정의

설정 기반 라우팅

src/app/router.options.ts 파일을 생성한 뒤, 아래와 같이 RouterConfig를 정의하세요:

app/router.options.ts

import type { RouterConfig } from '@nuxt/schema';

export default <RouterConfig> {
  routes: (_routes) => [],
};

Home 페이지를 추가하려면 다음 순서로 진행합니다.

1. pages layer에 Home page slice를 생성합니다.
2. app/router.options.ts에 Home 라우트를 등록합니다.

page slice는 CLI를 사용하여 생성할 수 있습니다:

fsd pages home

src/pages/home/ui/home-page.vue를 만든 뒤, Public API로 노출합니다.

src/pages/home/index.ts

export { default as HomePage } from './ui/home-page';

프로젝트 구조는 다음과 같습니다.

• 디렉터리src

  • 디렉터리app

    • router.options.ts
  • 디렉터리pages

    • 디렉터리home

      • 디렉터리ui

        • home-page.vue
      • index.ts

이제 router.options.ts의 routes 배열에 Home 라우트를 추가합니다.

app/router.options.ts

import type { RouterConfig } from '@nuxt/schema'

export default <RouterConfig> {
  routes: (_routes) => [
    {
      name: 'home',
      path: '/',
      component: () => import('@/pages/home.vue').then(r => r.default || r)
    }
  ],
}

파일 기반 라우팅

src 폴더와 라우트 폴더 구성

루트에 src 폴더를 만들고 그 안에 app과 pages layer를 생성합니다. app layer에 routes 폴더를 추가해 Nuxt 라우트를 관리합니다.

• 디렉터리src

  • 디렉터리app

    • routes
  • pages FSD Pages layer

nuxt.config.ts에서 라우트 폴더 변경

pages 폴더 대신 app/routes 폴더를 라우트 폴더로 사용하도록 설정하려면, nuxt.config.ts 파일을 수정해야 합니다.

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true }, // 개발 도구 활성화 (FSD와 무관)
  alias: {
    "@": '../src'
  },
  dir: {
    pages: './src/app/routes'
  }
})

이제 app/routes에서 라우트를 만들고 pages의 컴포넌트를 연결할 수 있습니다.

Home 페이지를 추가하려면:

• pages layer에 slice를 생성합니다.
• app/routes에 라우트를 생성합니다.
• page slice의 컴포넌트를 라우트에서 사용할 수 있도록 연결합니다.

1. page slice 생성

page slice는 CLI를 사용하여 간편하게 생성할 수 있습니다:

fsd pages home

이제 ui segment 내에 home-page.vue 파일을 생성하고, Public API를 통해 이를 노출합니다:

src/pages/home/index.ts

export { default as HomePage } from './ui/home-page';

2. app/routes 내에 라우트 추가

생성한 page를 라우트와 연결하려면, app/routes/index.vue 파일을 생성하고 HomePage 컴포넌트를 등록해야 합니다.

• 디렉터리src

  • 디렉터리app

    • 디렉터리routes

      • index.vue
  • 디렉터리pages

    • 디렉터리home

      • 디렉터리ui

        • home-page.vue
      • index.ts

3. index.vue에서 page 컴포넌트 등록

src/app/routes/index.vue

<script setup>
  import { HomePage } from '@/pages/home';
</script>

<template>
  <HomePage/>
</template>

이제 HomePage가 Nuxt 라우팅으로 정상 렌더링됩니다.

layouts 관리하기

레이아웃 파일을 src/app/layouts에 두고, nuxt.config.ts의 dir.layouts에 경로를 지정합니다.

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true }, // 개발 도구 활성화 (FSD와 무관)
  alias: {
    "@": '../src'
  },
  dir: {
    pages: './src/app/routes',
    layouts: './src/app/layouts'
  }
})

참고 자료

• NuxtJS dir 설정 문서
• NuxtJS 라우터 설정 변경 문서
• NuxtJS 별칭(alias) 설정 문서