Использование с NuxtJS
В NuxtJS проекте возможно реализовать FSD, однако возникают конфликты из-за различий между требованиями к структуре проекта NuxtJS и принципами FSD:
- Изначально, NuxtJS предлагает файловую структуру проекта без папки
src
, то есть в корне проекта. - Файловый роутинг находится в папке
pages
, а в FSD эта папка отведена под плоскую структуру слайсов.
Добавление алиаса для src
директории
Добавьте обьект alias
в ваш конфиг:
export default defineNuxtConfig({
devtools: { enabled: true }, // Не относятся к FSD, включёны при старте проекта
alias: {
"@": '../src'
},
})
Выбор способа настройки роутера
В NuxtJS есть два способа настройки роутинга - с помощью конфига и с помощью файловой структуры.
В случае с файловым роутингом вы будете создавать index.vue файлы в папках внутри директории app/routes, а в случае конфига - настраивать роуты в 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
export { default as HomePage } from './ui/home-page';
Таким образом, файловая структура будет выглядеть так:
|── src
│ ├── app
│ │ ├── router.config.ts
│ ├── pages
│ │ ├── home
│ │ │ ├── ui
│ │ │ │ ├── home-page.vue
│ │ │ ├── index.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
следующим образом:
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
export { default as HomePage } from './ui/home-page';
Создайте роут для этой страницы внутри слоя app
:
├── src
│ ├── app
│ │ ├── routes
│ │ │ ├── index.vue
│ ├── pages
│ │ ├── home
│ │ │ ├── ui
│ │ │ │ ├── home-page.vue
│ │ │ ├── index.ts
Добавьте внутрь index.vue
файла компонент вашей страницы:
<script setup>
import { HomePage } from '@/pages/home';
</script>
<template>
<HomePage/>
</template>
Что делать с layouts
?
Вы можете разместить layouts внутри слоя app
, для этого нужно изменить конфиг следующим образом:
export default defineNuxtConfig({
devtools: { enabled: true }, // Не относятся к FSD, включёны при старте проекта
alias: {
"@": '../src'
},
dir: {
pages: './src/app/routes',
layouts: './src/app/layouts'
}
})