Skip to content

Commit f525a6a

Browse files
falkomerrfalkomerr
authored
feat: add config routing to nuxtjs guide (#710)
1 parent 96309bb commit f525a6a

File tree

2 files changed

+137
-12
lines changed

2 files changed

+137
-12
lines changed

‎i18n/en/docusaurus-plugin-content-docs/current/guides/tech/with-nuxtjs.mdx‎

Lines changed: 72 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ sidebar_position: 10
33
---
44
# Usage with NuxtJS
55

6-
It is possible to implement FSD in a NuxtJS project, but conflicts arise due to differences between the NuxtJS project structure requirements and FSD principles:
6+
It is possible to implement FSD in a NuxtJS project, but conflicts arise due to the differences between NuxtJS project structure requirements and FSD principles:
77

88
- Initially, NuxtJS offers a project file structure without a `src` folder, i.e. in the root of the project.
99
- The file routing is in the `pages` folder, while in FSD this folder is reserved for the flat slice structure.
@@ -12,32 +12,92 @@ It is possible to implement FSD in a NuxtJS project, but conflicts arise due to
1212
## Adding an alias for the `src` directory
1313

1414
Add an `alias` object to your config:
15-
1615
```ts title="nuxt.config.ts"
1716
export default defineNuxtConfig({
18-
devtools: { enabled: true }, // Not related to FSD, enabled at project startup
17+
devtools: { enabled: true }, // Not FSD related, enabled at project startup
1918
alias: {
2019
"@": '../src'
2120
},
2221
})
2322
```
23+
## Choose how to configure the router
24+
25+
In NuxtJS, there are two ways to customize the routing - using a config and using a file structure.
26+
In the case of file-based routing, you will create index.vue files in folders inside the app/routes directory, and in the case of configure, you will configure the routers in the `router.options.ts` file.
27+
28+
29+
### Routing using config
30+
31+
In the `app` layer, create a `router.options.ts` file, and export a config object from it:
32+
```ts title="app/router.options.ts"
33+
import type { RouterConfig } from '@nuxt/schema';
34+
35+
export default <RouterConfig> {
36+
routes: (_routes) => [],
37+
};
38+
39+
```
40+
41+
To add a `Home` page to your project, you need to do the following steps:
42+
- Add a page slice inside the `pages` layer
43+
- Add the appropriate route to the `app/router.config.ts` config
44+
45+
46+
To create a page slice, let's use the [CLI](https://github.com/feature-sliced/cli):
47+
48+
```shell
49+
fsd pages home
50+
```
2451

25-
## Move file routing to `src/app`
52+
Create a ``home-page.vue`` file inside the ui segment, access it using the Public API
53+
54+
```ts title="src/pages/home/index.ts"
55+
export { default as HomePage } from './ui/home-page';
56+
```
2657

27-
First of all, create a `src` directory in the root of the project, and create app and pages layers inside this directory and a routes folder inside the app layer.
58+
Thus, the file structure will look like this:
59+
```sh
60+
|── src
61+
│ ├── app
62+
│ │ ├── router.config.ts
63+
│ ├── pages
64+
│ │ ├── home
65+
│ │ │ ├── ui
66+
│ │ │ │ ├── home-page.vue
67+
│ │ │ ├── index.ts
68+
```
69+
Finally, let's add a root to the config:
70+
71+
```ts title="app/router.config.ts"
72+
import type { RouterConfig } from '@nuxt/schema'
73+
74+
export default <RouterConfig> {
75+
routes: (_routes) => [
76+
{
77+
name: 'home',
78+
path: '/',
79+
component: () => import('@/pages/home.vue').then(r => r.default || r)
80+
}
81+
],
82+
}
83+
```
84+
85+
### File Routing
86+
87+
First of all, create a `src` directory in the root of your project, and create app and pages layers inside this directory and a routes folder inside the app layer.
2888
Thus, your file structure should look like this:
2989

3090
```sh
3191
├── src
3292
│ ├── app
3393
│ │ ├── routes
34-
│ ├── pages # The pages folder assigned to FSD
94+
│ ├── pages # Pages folder, related to FSD
3595
```
3696

37-
In order for NuxtJS to use the `app` layer for file routing, you need to modify `nuxt.config.ts` as follows:
97+
In order for NuxtJS to use the routes folder inside the `app` layer for file routing, you need to modify `nuxt.config.ts` as follows:
3898
```ts title="nuxt.config.ts"
3999
export default defineNuxtConfig({
40-
devtools: { enabled: true }, // Not FSD related, enabled at project startup
100+
devtools: { enabled: true }, // Not FSD related, enabled at project startup
41101
alias: {
42102
"@": '../src'
43103
},
@@ -47,7 +107,7 @@ export default defineNuxtConfig({
47107
})
48108
```
49109

50-
Now, you can create roots for pages within `app` and connect pages from `pages` to them.
110+
Now, you can create routes for pages within `app` and connect pages from `pages` to them.
51111

52112
For example, to add a `Home` page to your project, you need to do the following steps:
53113
- Add a page slice inside the `pages` layer
@@ -99,7 +159,7 @@ You can place layouts inside the `app` layer, to do this you need to modify the
99159

100160
```ts title="nuxt.config.ts"
101161
export default defineNuxtConfig({
102-
devtools: { enabled: true }, // Not related to FSD, enabled at project startup
162+
devtools: { enabled: true }, // Not related to FSD, enabled at project startup
103163
alias: {
104164
"@": '../src'
105165
},
@@ -114,4 +174,6 @@ export default defineNuxtConfig({
114174
## See also
115175

116176
- [Documentation on changing directory config in NuxtJS](https://nuxt.com/docs/api/nuxt-config#dir)
177+
- [Documentation on changing router config in NuxtJS](https://nuxt.com/docs/guide/recipes/custom-routing#router-config)
117178
- [Documentation on changing aliases in NuxtJS](https://nuxt.com/docs/api/nuxt-config#alias)
179+

‎i18n/ru/docusaurus-plugin-content-docs/current/guides/tech/with-nuxtjs.mdx‎

Lines changed: 65 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ sidebar_position: 10
33
---
44
# Использование с NuxtJS
55

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

88
- Изначально, NuxtJS предлагает файловую структуру проекта без папки `src`, то есть в корне проекта.
99
- Файловый роутинг находится в папке `pages`, а в FSD эта папка отведена под плоскую структуру слайсов.
@@ -20,8 +20,69 @@ export default defineNuxtConfig({
2020
},
2121
})
2222
```
23+
## Выбор способа настройки роутера
2324

24-
## Перемещение файлового роутинга в `src/app`
25+
В NuxtJS есть два способа настройки роутинга - с помощью конфига и с помощью файловой структуры.
26+
В случае с файловым роутингом вы будете создавать index.vue файлы в папках внутри директории app/routes, а в случае конфига - настраивать роуты в `router.options.ts` файле.
27+
28+
29+
### Роутинг с помощью конфига
30+
31+
В слое `app` создайте файл `router.options.ts`, и экспортируйте из него обьект конфига:
32+
```ts title="app/router.options.ts"
33+
import type { RouterConfig } from '@nuxt/schema';
34+
35+
export default <RouterConfig> {
36+
routes: (_routes) => [],
37+
};
38+
39+
```
40+
41+
Чтобы добавить страницу `Home` в проект, вам нужно сделать следующие шаги:
42+
- Добавить слайс страницы внутри слоя `pages`
43+
- Добавить соответствующий роут в конфиг `app/router.config.ts`
44+
45+
46+
Для того чтобы создать слайс страницы, воспользуемся [CLI](https://github.com/feature-sliced/cli):
47+
48+
```shell
49+
fsd pages home
50+
```
51+
52+
Создайте файл `home-page.vue` внутри сегмента ui, откройте к нему доступ с помощью Public API
53+
54+
```ts title="src/pages/home/index.ts"
55+
export { default as HomePage } from './ui/home-page';
56+
```
57+
58+
Таким образом, файловая структура будет выглядеть так:
59+
```sh
60+
|── src
61+
│ ├── app
62+
│ │ ├── router.config.ts
63+
│ ├── pages
64+
│ │ ├── home
65+
│ │ │ ├── ui
66+
│ │ │ │ ├── home-page.vue
67+
│ │ │ ├── index.ts
68+
```
69+
Наконец, добавим роут в конфиг:
70+
71+
```ts title="app/router.config.ts"
72+
import type { RouterConfig } from '@nuxt/schema'
73+
74+
export default <RouterConfig> {
75+
routes: (_routes) => [
76+
{
77+
name: 'home',
78+
path: '/',
79+
component: () => import('@/pages/home.vue').then(r => r.default || r)
80+
}
81+
],
82+
}
83+
```
84+
85+
### Файловый роутинг
2586

2687
В первую очередь, создайте `src` директорию в корне проекта, а также создайте внутри этой директории слои app и pages и папку routes внутри слоя app.
2788
Таким образом, ваша файловая структура должна выглядеть так:
@@ -113,4 +174,6 @@ export default defineNuxtConfig({
113174
## См. также
114175

115176
- [Документация по изменению конфига директорий в NuxtJS](https://nuxt.com/docs/api/nuxt-config#dir)
177+
- [Документация по изменению конфига роутера в NuxtJS](https://nuxt.com/docs/guide/recipes/custom-routing#router-config)
116178
- [Документация по изменению алиасов в NuxtJS](https://nuxt.com/docs/api/nuxt-config#alias)
179+

0 commit comments

Comments
 (0)