Sử dụng với NuxtJS

Có thể triển khai FSD trong dự án NuxtJS, nhưng xảy ra xung đột do sự khác biệt giữa yêu cầu cấu trúc dự án của NuxtJS và các nguyên tắc FSD:

Ban đầu, NuxtJS cung cấp cấu trúc file dự án không có thư mục src, tức là ở thư mục gốc của dự án.
File routing nằm trong thư mục pages, trong khi ở FSD thư mục này được dành riêng cho cấu trúc slice phẳng.

Thêm alias cho thư mục `src`

Thêm đối tượng alias vào config của bạn:

export default defineNuxtConfig({
  devtools: { enabled: true }, // Not FSD related, enabled at project startup
  alias: {
    "@": '../src'
  },
})

Chọn cách cấu hình router

Trong NuxtJS, có hai cách để tùy chỉnh routing - sử dụng config và sử dụng cấu trúc file. Trong trường hợp file-based routing, bạn sẽ tạo các file index.vue trong các thư mục bên trong thư mục app/routes, và trong trường hợp configure, bạn sẽ cấu hình các router trong file router.options.ts.

Routing sử dụng config

Trong layer app, tạo file router.options.ts và export một config object từ nó:

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

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

Để thêm page Home vào dự án của bạn, bạn cần thực hiện các bước sau:

Thêm một page slice bên trong layer pages
Thêm route phù hợp vào config app/router.config.ts

Để tạo một page slice, hãy sử dụng CLI:

fsd pages home

Tạo file home-page.vue bên trong segment ui, truy cập nó bằng Public API

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

Vậy, cấu trúc file sẽ trông như thế này:

Thư mụcsrc
- Thư mụcapp
  - router.config.ts
- Thư mụcpages
  - Thư mụchome
    Thư mụcui
    home-page.vue
    index.ts

Cuối cùng, hãy thêm một route vào config:

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

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

File Routing

Trước tiên, tạo thư mục src trong thư mục gốc của dự án của bạn, và tạo các layer app và pages bên trong thư mục này cùng với thư mục routes bên trong layer app. Vậy, cấu trúc file của bạn nên trông như thế này:

Thư mụcsrc
- Thư mụcapp
  - routes
- pages Pages folder, related to FSD

Để NuxtJS sử dụng thư mục routes bên trong layer app cho file routing, bạn cần sửa đổi nuxt.config.ts như sau:

export default defineNuxtConfig({
  devtools: { enabled: true }, // Not FSD related, enabled at project startup
  alias: {
    "@": '../src'
  },
  dir: {
    pages: './src/app/routes'
  }
})

Bây giờ, bạn có thể tạo các route cho pages trong app và kết nối các page từ pages với chúng.

Ví dụ, để thêm page Home vào dự án của bạn, bạn cần thực hiện các bước sau:

Thêm một page slice bên trong layer pages
Thêm route tương ứng bên trong layer app
Kết nối page từ slice với route

Để tạo một page slice, hãy sử dụng CLI:

fsd pages home

Tạo file home-page.vue bên trong segment ui, truy cập nó bằng Public API

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

Tạo một route cho page này bên trong layer app:

Thư mụcsrc
- Thư mụcapp
  - Thư mụcroutes
    index.vue
- Thư mụcpages
  - Thư mụchome
    Thư mụcui
    home-page.vue
    index.ts

Thêm page component của bạn vào bên trong file index.vue:

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

<template>
  <HomePage/>
</template>

Làm gì với `layouts`?

Bạn có thể đặt layouts bên trong layer app, để làm điều này bạn cần sửa đổi config như sau:

export default defineNuxtConfig({
  devtools: { enabled: true }, // Not related to FSD, enabled at project startup
  alias: {
    "@": '../src'
  },
  dir: {
    pages: './src/app/routes',
    layouts: './src/app/layouts'
  }
})

Sử dụng với NuxtJS

Thêm alias cho thư mục src

Chọn cách cấu hình router

Routing sử dụng config

File Routing

Làm gì với layouts?

Xem thêm

Thêm alias cho thư mục `src`

Làm gì với `layouts`?