Skip to content

Commit

Permalink
Fix formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
illright authored Jun 16, 2024
1 parent 53d1a22 commit 40fb5e4
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 19 deletions.
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
sidebar_position: 10
---
# Usage with NextJS
# Usage with NuxtJS

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:
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:

- Initially, NuxtJS offers a project file structure without a `src` folder, i.e. in the root of the project.
- The file routing is in the `pages` folder, while in FSD this folder is reserved for the flat slice structure.
Expand All @@ -30,8 +30,8 @@ Thus, your file structure should look like this:
```sh
├── src
│ ├── app
│ │ ├── routes
│ ├── pages # The pages folder assigned to FSD
│ │ ├── routes
│ ├── pages # The pages folder assigned to FSD
```

In order for NuxtJS to use the `app` layer for file routing, you need to modify `nuxt.config.ts` as follows:
Expand All @@ -47,7 +47,7 @@ export default defineNuxtConfig({
})
```

Now, you can create roots for pages within `app` and connect pages from `pages` to them.
Now, you can create roots for pages within `app` and connect pages from `pages` to them.

For example, to add a `Home` page to your project, you need to do the following steps:
- Add a page slice inside the `pages` layer
Expand All @@ -56,7 +56,7 @@ For example, to add a `Home` page to your project, you need to do the following

To create a page slice, let's use the [CLI](https://github.com/feature-sliced/cli):

```shell
```shell
fsd pages home
```

Expand All @@ -74,13 +74,12 @@ Create a root for this page inside the `app` layer:
│ ├── app
│ │ ├── routes
│ │ │ ├── home
│ │ │ │ ├── index.vue
│ │ │ │ ├── index.vue
│ ├── pages
│ │ ├──home
│ │ │ ├── ui
│ │ ├── home
│ │ │ ├── ui
│ │ │ │ ├── home-page.vue
│ │ │ ├── index.ts

```

Add your page component inside the `index.vue` file:
Expand All @@ -107,7 +106,7 @@ export default defineNuxtConfig({
},
dir: {
pages: './src/app/routes',
layouts: './src/app/layouts'
layouts: './src/app/layouts'
}
})
```
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,13 @@ export default defineNuxtConfig({

## Перемещение файлового роутинга в `src/app`

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

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

Expand All @@ -46,7 +46,7 @@ export default defineNuxtConfig({
})
```

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

Например, чтобы добавить страницу `Home` в проект, вам нужно сделать следующие шаги:
- Добавить слайс страницы внутри слоя `pages`
Expand All @@ -73,13 +73,12 @@ export { default as HomePage } from './ui/home-page';
│ ├── app
│ │ ├── routes
│ │ │ ├── home
│ │ │ │ ├── index.vue
│ │ │ │ ├── index.vue
│ ├── pages
│ │ ├──home
│ │ │ ├── ui
│ │ ├── home
│ │ │ ├── ui
│ │ │ │ ├── home-page.vue
│ │ │ ├── index.ts

```

Добавьте внутрь `index.vue` файла компонент вашей страницы:
Expand All @@ -106,7 +105,7 @@ export default defineNuxtConfig({
},
dir: {
pages: './src/app/routes',
layouts: './src/app/layouts'
layouts: './src/app/layouts'
}
})
```
Expand Down

0 comments on commit 40fb5e4

Please sign in to comment.