From bcef9571dd756d1fdf5b936e2d99e452376f55c2 Mon Sep 17 00:00:00 2001 From: Matt Clegg Date: Wed, 6 Nov 2024 10:46:54 +0000 Subject: [PATCH 1/8] docs: first pass at the shared directory documentation --- .../2.guide/2.directory-structure/1.shared.md | 77 +++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 docs/2.guide/2.directory-structure/1.shared.md diff --git a/docs/2.guide/2.directory-structure/1.shared.md b/docs/2.guide/2.directory-structure/1.shared.md new file mode 100644 index 0000000000..b0753c1341 --- /dev/null +++ b/docs/2.guide/2.directory-structure/1.shared.md @@ -0,0 +1,77 @@ +--- +title: 'shared' +head.title: 'shared/' +description: Use the shared/ directory to share functionality between the Vue app Nitro and server. +navigation.icon: i-ph-folder +--- + +The `shared/` directory allows you to share code that can be used in both the Vue app and the Nitro server. + +::tip +The `shared/` directory is available in Nuxt v3.14+. +:: + +::important +Code in the shared directory cannot import any Vue or nitro code. +:: + +## Usage + +**Method 1:** Using named export + +```ts twoslash [shared/utils/capitalize.ts] +export const capitalize = (input: string) => { + return input[0].toUpperCase() + input.slice(1) +} +``` + +**Method 2:** Using default export + +```ts twoslash [shared/utils/capitalize.ts] +export default function capitalize (input: string) { + return input[0].toUpperCase() + input.slice(1) +} +``` + +**Usage:** You can now use auto-imported utility functions in `.js`, `.ts` and `.vue` files within your Vue app and the `server/` directory. + +If you are using `compatibilityVersion: 4`, you can use the auto-imported functions in the `app/` directory. + +```vue [app.vue] + + + +``` + +```ts [server/api/hello.get.ts] +export default defineEventHandler((event) => { + return { + hello: capitalize('hello') + } +}) +``` + +## Auto Imports + +Only files in the `shared/utils/` and `shared/types/` directories will be auto-imported. + +```bash [Directory Structure] +-| shared/ +---| foo.ts # Not auto-imported +---| utils/ +-----| bar.ts # Auto-imported +---| types/ +-----| bar.d.ts # Auto-imported +``` + +Any other files you create in the shared folder must be manually imported using `import foo from '#shared/foo'`. + +This includes nested directories. A file located at `shared/formatters/lower.ts` will be imported with `import lower from '#shared/formatters/lower'`. + +:read-more{to="/docs/guide/concepts/auto-imports"} From cb9a4ec847387d274908e7a252d2a7851d4d8900 Mon Sep 17 00:00:00 2001 From: Matt Clegg Date: Wed, 6 Nov 2024 10:46:54 +0000 Subject: [PATCH 2/8] docs: first pass at the shared directory documentation --- .../2.guide/2.directory-structure/1.shared.md | 77 +++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 docs/2.guide/2.directory-structure/1.shared.md diff --git a/docs/2.guide/2.directory-structure/1.shared.md b/docs/2.guide/2.directory-structure/1.shared.md new file mode 100644 index 0000000000..72fabd5f1e --- /dev/null +++ b/docs/2.guide/2.directory-structure/1.shared.md @@ -0,0 +1,77 @@ +--- +title: 'shared' +head.title: 'shared/' +description: Use the shared/ directory to share functionality between the Vue app and the Nitro server. +navigation.icon: i-ph-folder +--- + +The `shared/` directory allows you to share code that can be used in both the Vue app and the Nitro server. + +::tip +The `shared/` directory is available in Nuxt v3.14+. +:: + +::important +Code in the shared directory cannot import any Vue or nitro code. +:: + +## Usage + +**Method 1:** Using named export + +```ts twoslash [shared/utils/capitalize.ts] +export const capitalize = (input: string) => { + return input[0].toUpperCase() + input.slice(1) +} +``` + +**Method 2:** Using default export + +```ts twoslash [shared/utils/capitalize.ts] +export default function capitalize (input: string) { + return input[0].toUpperCase() + input.slice(1) +} +``` + +**Usage:** You can now use auto-imported utility functions in `.js`, `.ts` and `.vue` files within your Vue app and the `server/` directory. + +If you are using `compatibilityVersion: 4`, you can use the auto-imported functions in the `app/` directory. + +```vue [app.vue] + + + +``` + +```ts [server/api/hello.get.ts] +export default defineEventHandler((event) => { + return { + hello: capitalize('hello') + } +}) +``` + +## Auto Imports + +Only files in the `shared/utils/` and `shared/types/` directories will be auto-imported. + +```bash [Directory Structure] +-| shared/ +---| foo.ts # Not auto-imported +---| utils/ +-----| bar.ts # Auto-imported +---| types/ +-----| bar.d.ts # Auto-imported +``` + +Any other files you create in the shared folder must be manually imported using `import foo from '#shared/foo'`. + +This includes nested directories. A file located at `shared/formatters/lower.ts` will be imported with `import lower from '#shared/formatters/lower'`. + +:read-more{to="/docs/guide/concepts/auto-imports"} From 519df56854fa5eb452215f3416f364e179d86945 Mon Sep 17 00:00:00 2001 From: Matt Clegg Date: Wed, 6 Nov 2024 12:02:58 +0000 Subject: [PATCH 3/8] docs: added clarity to shared folder auto imports --- .../2.guide/2.directory-structure/1.shared.md | 29 ++++++++++++++----- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/docs/2.guide/2.directory-structure/1.shared.md b/docs/2.guide/2.directory-structure/1.shared.md index 72fabd5f1e..16e1a17462 100644 --- a/docs/2.guide/2.directory-structure/1.shared.md +++ b/docs/2.guide/2.directory-structure/1.shared.md @@ -35,7 +35,7 @@ export default function capitalize (input: string) { **Usage:** You can now use auto-imported utility functions in `.js`, `.ts` and `.vue` files within your Vue app and the `server/` directory. -If you are using `compatibilityVersion: 4`, you can use the auto-imported functions in the `app/` directory. +If you have set `compatibilityVersion: 4` in your `nuxt.config.ts`, you can use the auto-imported functions in the `app/` directory. This is part of Nuxt's progressive compatibility features preparing for version 4. ```vue [app.vue]