ข้ามไปยังเนื้อหาหลัก

การใช้ร่วมกับ NuxtJS

เป็นไปได้ที่จะใช้ FSD ในโปรเจกต์ NuxtJS แต่จะเกิดความขัดแย้งเนื่องจากความแตกต่างระหว่างข้อกำหนดโครงสร้างโปรเจกต์ของ NuxtJS และหลักการของ FSD:

  • โดยปกติ NuxtJS เสนอโครงสร้างไฟล์แบบไม่มีโฟลเดอร์ src คืออยู่ที่ Root ของโปรเจกต์เลย
  • File routing อยู่ในโฟลเดอร์ pages ในขณะที่ใน FSD โฟลเดอร์นี้ถูกจองไว้สำหรับโครงสร้าง Slice แบบแบนราบ (Flat slice structure)

การเพิ่ม Alias สำหรับไดเรกทอรี src​

เพิ่ม alias object ใน Config ของคุณ:

nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true }, // ไม่เกี่ยวกับ FSD, เปิดใช้งานตอนเริ่มโปรเจกต์
  alias: {
    "@": '../src'
  },
})

เลือกวิธีกำหนดค่า Router​

ใน NuxtJS มีสองวิธีในการปรับแต่ง Routing - ใช้ Config และใช้โครงสร้างไฟล์ ในกรณีของ File-based routing คุณจะสร้างไฟล์ index.vue ในโฟลเดอร์ภายในไดเรกทอรี app/routes และในกรณีของ Config คุณจะกำหนดค่า Routers ในไฟล์ router.options.ts

Routing โดยใช้ Config​

ใน app layer สร้างไฟล์ router.options.ts และ Export config object จากมัน:

app/router.options.ts
import type { RouterConfig } from '@nuxt/schema';

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

ในการเพิ่มหน้า Home ในโปรเจกต์ คุณต้องทำตามขั้นตอนเหล่านี้:

  • เพิ่ม Page slice ภายใน pages layer
  • เพิ่ม Route ที่เหมาะสมใน app/router.config.ts config

ในการสร้าง Page slice ลองใช้ CLI:

fsd pages home

สร้างไฟล์ home-page.vue ภายใน UI segment, เข้าถึงมันผ่าน Public API

src/pages/home/index.ts
export { default as HomePage } from './ui/home-page';

ดังนั้น โครงสร้างไฟล์จะเป็นดังนี้:

|── src
│   ├── app
│   │   ├── router.config.ts
│   ├── pages
│   │   ├── home
│   │   │   ├── ui
│   │   │   │   ├── home-page.vue
│   │   │   ├── index.ts

สุดท้าย มาเพิ่ม Route ใน Config:

app/router.config.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)
    }
  ],
}

File Routing​

ก่อนอื่น สร้างไดเรกทอรี src ใน Root ของโปรเจกต์ และสร้าง App และ Pages layers ภายในไดเรกทอรีนี้ และโฟลเดอร์ Routes ภายใน App layer ดังนั้น โครงสร้างไฟล์ของคุณควรจะเป็นดังนี้:

├── src
│   ├── app
│   │   ├── routes
│   ├── pages                         # Pages folder, เกี่ยวข้องกับ FSD

เพื่อให้ NuxtJS ใช้โฟลเดอร์ Routes ภายใน app layer สำหรับ File routing คุณต้องแก้ไข nuxt.config.ts ดังนี้:

nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true }, // ไม่เกี่ยวกับ FSD, เปิดใช้งานตอนเริ่มโปรเจกต์
  alias: {
    "@": '../src'
  },
  dir: {
    pages: './src/app/routes'
  }
})

ตอนนี้ คุณสามารถสร้าง Routes สำหรับ Pages ภายใน app และเชื่อมต่อ Pages จาก pages เข้ากับพวกมัน

ตัวอย่างเช่น ในการเพิ่มหน้า Home ในโปรเจกต์ คุณต้องทำตามขั้นตอนเหล่านี้:

  • เพิ่ม Page slice ภายใน pages layer
  • เพิ่ม Route ที่สอดคล้องกันภายใน app layer
  • เชื่อมต่อ Page จาก Slice เข้ากับ Route

ในการสร้าง Page slice ลองใช้ CLI:

fsd pages home

สร้างไฟล์ home-page.vue ภายใน UI segment, เข้าถึงมันโดยใช้ Public API

src/pages/home/index.ts
export { default as HomePage } from './ui/home-page';

สร้าง Route สำหรับหน้านี้ภายใน app layer:


├── src
│   ├── app
│   │   ├── routes
│   │   │   ├── index.vue
│   ├── pages
│   │   ├── home
│   │   │   ├── ui
│   │   │   │   ├── home-page.vue
│   │   │   ├── index.ts

เพิ่ม Page component ของคุณภายในไฟล์ index.vue:

src/app/routes/index.vue
<script setup>
  import { HomePage } from '@/pages/home';
</script>

<template>
  <HomePage/>
</template>

ทำอย่างไรกับ layouts?​

คุณสามารถวาง Layouts ภายใน app layer ได้ ในการทำเช่นนี้คุณต้องแก้ไข Config ดังนี้:

nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true }, // ไม่เกี่ยวกับ FSD, เปิดใช้งานตอนเริ่มโปรเจกต์
  alias: {
    "@": '../src'
  },
  dir: {
    pages: './src/app/routes',
    layouts: './src/app/layouts'
  }
})

ดูเพิ่มเติม​