Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 05:35:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: consistent directory structure (#29292)

Browse Source
This commit is contained in:
Jeremy Graziani 2024-10-08 15:48:47 +02:00 committed by GitHub
parent b29cb512c5
commit 768be722b0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 35 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/1.getting-started/5.routing.md
View File

@ -15,7 +15,7 @@ This file system routing uses naming conventions to create dynamic and nested ro
::code-group ::code-group
```bash [Directory Structure] ```bash [Directory Structure]
| pages/ -| pages/
---| about.vue ---| about.vue
---| index.vue ---| index.vue
---| posts/ ---| posts/

38
docs/2.guide/2.directory-structure/1.components.md
View File

@ -8,9 +8,9 @@ navigation.icon: i-ph-folder
Nuxt automatically imports any components in this directory (along with components that are registered by any modules you may be using). Nuxt automatically imports any components in this directory (along with components that are registered by any modules you may be using).
```bash [Directory Structure] ```bash [Directory Structure]
| components/ -| components/
--| AppHeader.vue ---| AppHeader.vue
--| AppFooter.vue ---| AppFooter.vue
``` ```
```html [app.vue] ```html [app.vue]
@ -28,10 +28,10 @@ Nuxt automatically imports any components in this directory (along with componen
If you have a component in nested directories such as: If you have a component in nested directories such as:
```bash [Directory Structure] ```bash [Directory Structure]
| components/ -| components/
--| base/ ---| base/
----| foo/ -----| foo/
------| Button.vue -------| Button.vue
``` ```
... then the component's name will be based on its own path directory and filename, with duplicate segments being removed. Therefore, the component's name will be: ... then the component's name will be based on its own path directory and filename, with duplicate segments being removed. Therefore, the component's name will be:
@ -285,8 +285,8 @@ export default defineNuxtConfig({
Now you can register server-only components with the `.server` suffix and use them anywhere in your application automatically. Now you can register server-only components with the `.server` suffix and use them anywhere in your application automatically.
```bash [Directory Structure] ```bash [Directory Structure]
| components/ -| components/
--| HighlightedMarkdown.server.vue ---| HighlightedMarkdown.server.vue
``` ```
```vue [pages/example.vue] ```vue [pages/example.vue]
@ -359,9 +359,9 @@ Slots can be interactive and are wrapped within a `<div>` with `display: content
In this case, the `.server` + `.client` components are two 'halves' of a component and can be used in advanced use cases for separate implementations of a component on server and client side. In this case, the `.server` + `.client` components are two 'halves' of a component and can be used in advanced use cases for separate implementations of a component on server and client side.
```bash [Directory Structure] ```bash [Directory Structure]
| components/ -| components/
--| Comments.client.vue ---| Comments.client.vue
--| Comments.server.vue ---| Comments.server.vue
``` ```
```vue [pages/example.vue] ```vue [pages/example.vue]
@ -389,15 +389,15 @@ You can use the `components:dirs` hook to extend the directory list without requ
Imagine a directory structure like this: Imagine a directory structure like this:
```bash [Directory Structure] ```bash [Directory Structure]
| node_modules/ -| node_modules/
---| awesome-ui/ ---| awesome-ui/
------| components/ -----| components/
---------| Alert.vue -------| Alert.vue
---------| Button.vue -------| Button.vue
------| nuxt.js -----| nuxt.js
| pages/ -| pages/
---| index.vue ---| index.vue
| nuxt.config.js -| nuxt.config.js
``` ```
Then in `awesome-ui/nuxt.js` you can use the `components:dirs` hook: Then in `awesome-ui/nuxt.js` you can use the `components:dirs` hook:

6
docs/2.guide/2.directory-structure/1.composables.md
View File

@ -85,11 +85,11 @@ export const useHello = () => {
Nuxt only scans files at the top level of the [`composables/` directory](/docs/guide/directory-structure/composables), e.g.: Nuxt only scans files at the top level of the [`composables/` directory](/docs/guide/directory-structure/composables), e.g.:
```bash [Directory Structure] ```bash [Directory Structure]
| composables/ -| composables/
---| index.ts // scanned ---| index.ts // scanned
---| useFoo.ts // scanned ---| useFoo.ts // scanned
-----| nested/ ---| nested/
-------| utils.ts // not scanned -----| utils.ts // not scanned
``` ```
Only `composables/index.ts` and `composables/useFoo.ts` would be searched for imports. Only `composables/index.ts` and `composables/useFoo.ts` would be searched for imports.

20
docs/2.guide/2.directory-structure/1.middleware.md
View File

@ -72,11 +72,11 @@ Middleware runs in the following order:
For example, assuming you have the following middleware and component: For example, assuming you have the following middleware and component:
```text [middleware/ directory] ```bash [middleware/ directory]
middleware/ -| middleware/
--| analytics.global.ts ---| analytics.global.ts
--| setup.global.ts ---| setup.global.ts
--| auth.ts ---| auth.ts
``` ```
```vue twoslash [pages/profile.vue] ```vue twoslash [pages/profile.vue]
@ -105,11 +105,11 @@ By default, global middleware is executed alphabetically based on the filename.
However, there may be times you want to define a specific order. For example, in the last scenario, `setup.global.ts` may need to run before `analytics.global.ts`. In that case, we recommend prefixing global middleware with 'alphabetical' numbering. However, there may be times you want to define a specific order. For example, in the last scenario, `setup.global.ts` may need to run before `analytics.global.ts`. In that case, we recommend prefixing global middleware with 'alphabetical' numbering.
```text [Directory structure] ```bash [Directory structure]
middleware/ -| middleware/
--| 01.setup.global.ts ---| 01.setup.global.ts
--| 02.analytics.global.ts ---| 02.analytics.global.ts
--| auth.ts ---| auth.ts
``` ```
::note ::note

4
docs/2.guide/2.directory-structure/1.pages.md
View File

@ -159,7 +159,7 @@ Example:
```bash [Directory Structure] ```bash [Directory Structure]
-| pages/ -| pages/
---| parent/ ---| parent/
------| child.vue -----| child.vue
---| parent.vue ---| parent.vue
``` ```
@ -408,7 +408,7 @@ However, you can use [Nuxt Layers](/docs/getting-started/layers) to create group
```bash [Directory Structure] ```bash [Directory Structure]
-| some-app/ -| some-app/
---| nuxt.config.ts ---| nuxt.config.ts
---| pages ---| pages/
-----| app-page.vue -----| app-page.vue
-| nuxt.config.ts -| nuxt.config.ts
``` ```