From 768be722b0410f504195d7aed21fd478cf0970da Mon Sep 17 00:00:00 2001 From: Jeremy Graziani Date: Tue, 8 Oct 2024 15:48:47 +0200 Subject: [PATCH] docs: consistent directory structure (#29292) --- docs/1.getting-started/5.routing.md | 2 +- .../2.directory-structure/1.components.md | 38 +++++++++---------- .../2.directory-structure/1.composables.md | 6 +-- .../2.directory-structure/1.middleware.md | 20 +++++----- docs/2.guide/2.directory-structure/1.pages.md | 4 +- 5 files changed, 35 insertions(+), 35 deletions(-) diff --git a/docs/1.getting-started/5.routing.md b/docs/1.getting-started/5.routing.md index e732502f6c..e88d9e8c24 100644 --- a/docs/1.getting-started/5.routing.md +++ b/docs/1.getting-started/5.routing.md @@ -15,7 +15,7 @@ This file system routing uses naming conventions to create dynamic and nested ro ::code-group ```bash [Directory Structure] -| pages/ +-| pages/ ---| about.vue ---| index.vue ---| posts/ diff --git a/docs/2.guide/2.directory-structure/1.components.md b/docs/2.guide/2.directory-structure/1.components.md index 8fb3a0c59f..0656b96e75 100644 --- a/docs/2.guide/2.directory-structure/1.components.md +++ b/docs/2.guide/2.directory-structure/1.components.md @@ -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). ```bash [Directory Structure] -| components/ ---| AppHeader.vue ---| AppFooter.vue +-| components/ +---| AppHeader.vue +---| AppFooter.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: ```bash [Directory Structure] -| components/ ---| base/ -----| foo/ -------| Button.vue +-| components/ +---| base/ +-----| foo/ +-------| 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: @@ -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. ```bash [Directory Structure] -| components/ ---| HighlightedMarkdown.server.vue +-| components/ +---| HighlightedMarkdown.server.vue ``` ```vue [pages/example.vue] @@ -359,9 +359,9 @@ Slots can be interactive and are wrapped within a `
` 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. ```bash [Directory Structure] -| components/ ---| Comments.client.vue ---| Comments.server.vue +-| components/ +---| Comments.client.vue +---| Comments.server.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: ```bash [Directory Structure] -| node_modules/ +-| node_modules/ ---| awesome-ui/ -------| components/ ----------| Alert.vue ----------| Button.vue -------| nuxt.js -| pages/ +-----| components/ +-------| Alert.vue +-------| Button.vue +-----| nuxt.js +-| pages/ ---| index.vue -| nuxt.config.js +-| nuxt.config.js ``` Then in `awesome-ui/nuxt.js` you can use the `components:dirs` hook: diff --git a/docs/2.guide/2.directory-structure/1.composables.md b/docs/2.guide/2.directory-structure/1.composables.md index dbd3510b56..ed96746656 100644 --- a/docs/2.guide/2.directory-structure/1.composables.md +++ b/docs/2.guide/2.directory-structure/1.composables.md @@ -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.: ```bash [Directory Structure] -| composables/ +-| composables/ ---| index.ts // scanned ---| useFoo.ts // scanned ------| nested/ --------| utils.ts // not scanned +---| nested/ +-----| utils.ts // not scanned ``` Only `composables/index.ts` and `composables/useFoo.ts` would be searched for imports. diff --git a/docs/2.guide/2.directory-structure/1.middleware.md b/docs/2.guide/2.directory-structure/1.middleware.md index 3fbcc732ce..d17c6ceb7c 100644 --- a/docs/2.guide/2.directory-structure/1.middleware.md +++ b/docs/2.guide/2.directory-structure/1.middleware.md @@ -72,11 +72,11 @@ Middleware runs in the following order: For example, assuming you have the following middleware and component: -```text [middleware/ directory] -middleware/ ---| analytics.global.ts ---| setup.global.ts ---| auth.ts +```bash [middleware/ directory] +-| middleware/ +---| analytics.global.ts +---| setup.global.ts +---| auth.ts ``` ```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. -```text [Directory structure] -middleware/ ---| 01.setup.global.ts ---| 02.analytics.global.ts ---| auth.ts +```bash [Directory structure] +-| middleware/ +---| 01.setup.global.ts +---| 02.analytics.global.ts +---| auth.ts ``` ::note diff --git a/docs/2.guide/2.directory-structure/1.pages.md b/docs/2.guide/2.directory-structure/1.pages.md index ce14e9075f..0efb13daac 100644 --- a/docs/2.guide/2.directory-structure/1.pages.md +++ b/docs/2.guide/2.directory-structure/1.pages.md @@ -159,7 +159,7 @@ Example: ```bash [Directory Structure] -| pages/ ---| parent/ -------| child.vue +-----| child.vue ---| parent.vue ``` @@ -408,7 +408,7 @@ However, you can use [Nuxt Layers](/docs/getting-started/layers) to create group ```bash [Directory Structure] -| some-app/ ---| nuxt.config.ts ----| pages +---| pages/ -----| app-page.vue -| nuxt.config.ts ```