Перейти к основному содержимому

Использование с NuxtJS

В NuxtJS проекте возможно реализовать FSD, однако возникают конфликты из-за различий между требованиями к структуре проекта NuxtJS и принципами FSD:

  • Изначально, NuxtJS предлагает файловую структуру проекта без папки src, то есть в корне проекта.
  • Файловый роутинг находится в папке pages, а в FSD эта папка отведена под плоскую структуру слайсов.

Добавление алиаса для src директории​

Добавьте обьект alias в ваш конфиг:

nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },        // Не относятся к FSD, включёны при старте проекта
  alias: {
    "@": '../src'
  },
})

Выбор способа настройки роутера​

В NuxtJS есть два способа настройки роутинга - с помощью конфига и с помощью файловой структуры. В случае с файловым роутингом вы будете создавать index.vue файлы в папках внутри директории app/routes, а в случае конфига - настраивать роуты в router.options.ts файле.

Роутинг с помощью конфига​

В слое app создайте файл router.options.ts, и экспортируйте из него обьект конфига:

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

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

Чтобы добавить страницу Home в проект, вам нужно сделать следующие шаги:

  • Добавить слайс страницы внутри слоя pages
  • Добавить соответствующий роут в конфиг app/router.config.ts

Для того чтобы создать слайс страницы, воспользуемся CLI:

fsd pages home

Создайте файл home-page.vue внутри сегмента ui, откройте к нему доступ с помощью 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

Наконец, добавим роут в конфиг:

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)
    }
  ],
}

Файловый роутинг​

В первую очередь, создайте src директорию в корне проекта, а также создайте внутри этой директории слои app и pages и папку routes внутри слоя app. Таким образом, ваша файловая структура должна выглядеть так:

├── src
│   ├── app
│   │   ├── routes
│   ├── pages                         # Папка pages, закреплённая за FSD

Для того чтобы NuxtJS использовал папку routes внутри слоя app для файлового роутинга, вам нужно изменить nuxt.config.ts следующим образом:

nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },        // Не относятся к FSD, включёны при старте проекта
  alias: {
    "@": '../src'
  },
  dir: {
    pages: './src/app/routes'
  }
})

Теперь, вы можете создавать роуты для страниц внутри app и подключать к ним страницы из pages.

Например, чтобы добавить страницу Home в проект, вам нужно сделать следующие шаги:

  • Добавить слайс страницы внутри слоя pages
  • Добавить соответствующий роут внутрь слоя app
  • Совместить страницу из слайса с роутом

Для того чтобы создать слайс страницы, воспользуемся CLI:

fsd pages home

Создайте файл home-page.vue внутри сегмента ui, откройте к нему доступ с помощью Public API

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

Создайте роут для этой страницы внутри слоя app:


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

Добавьте внутрь index.vue файла компонент вашей страницы:

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

<template>
  <HomePage/>
</template>

Что делать с layouts?​

Вы можете разместить layouts внутри слоя app, для этого нужно изменить конфиг следующим образом:

nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },        // Не относятся к FSD, включёны при старте проекта
  alias: {
    "@": '../src'
  },
  dir: {
    pages: './src/app/routes',
    layouts: './src/app/layouts'
  }
})

См. также​