diff --git a/docs/2.guide/2.directory-structure/1.shared.md b/docs/2.guide/2.directory-structure/1.shared.md index 0e29ac48b6..d5c7361cc3 100644 --- a/docs/2.guide/2.directory-structure/1.shared.md +++ b/docs/2.guide/2.directory-structure/1.shared.md @@ -15,9 +15,15 @@ The `shared/` directory is available in Nuxt v3.14+. Code in the `shared/` directory cannot import any Vue or Nitro code. :: +::warning +Auto-imports are not enabled by default in Nuxt v3 to prevent breaking changes in existing projects. + +To use these auto-imported utils and types, you must first [set `future.compatibilityVersion: 4` in your `nuxt.config.ts`](/docs/getting-started/upgrade#opting-in-to-nuxt-4). +:: + ## Usage -**Method 1:** Using named export +**Method 1:** Named export ```ts twoslash [shared/utils/capitalize.ts] export const capitalize = (input: string) => { @@ -25,17 +31,15 @@ export const capitalize = (input: string) => { } ``` -**Method 2:** Using default export +**Method 2:** Default export ```ts twoslash [shared/utils/capitalize.ts] -export default function capitalize (input: string) { +export default function (input: string) { return input[0] ? 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 have [set `compatibilityVersion: 4` in your `nuxt.config.ts`](/docs/getting-started/upgrade#opting-in-to-nuxt-4), you can use the auto-imported functions in the `app/` directory. This is part of Nuxt's progressive compatibility features preparing for version 4. +You can now use [auto-imported](/docs/guide/directory-structure/shared#auto-imports) utilities in your Nuxt app and `server/` directory. ```vue [app.vue]