Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-02-11 11:18:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: add auto import info about shared utils (#30858)

Browse Source 
Co-authored-by: Julien Huang <julien.h.dev@gmail.com>
This commit is contained in:
Camille Coutens 2025-02-08 22:22:17 +01:00 committed by GitHub
parent 2d88d86835
commit 059700616e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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. 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 ## Usage
**Method 1:** Using named export **Method 1:** Named export
```ts twoslash [shared/utils/capitalize.ts] ```ts twoslash [shared/utils/capitalize.ts]
export const capitalize = (input: string) => { 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] ```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) : '' 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. You can now use [auto-imported](/docs/guide/directory-structure/shared#auto-imports) utilities in your Nuxt app and `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.
```vue [app.vue] ```vue [app.vue]
<script setup lang="ts"> <script setup lang="ts">
@ -57,9 +61,9 @@ export default defineEventHandler((event) => {
}) })
``` ```
## Auto Imports ## How Files Are Scanned
Only files in the `shared/utils/` and `shared/types/` directories will be auto-imported. Files nested within subdirectories of these directories will not be auto-imported. Only files in the `shared/utils/` and `shared/types/` directories will be auto-imported. Files nested within subdirectories of these directories will not be auto-imported unless you add these directories to `imports.dirs` and `nitro.imports.dirs`.
::tip ::tip
The way `shared/utils` and `shared/types` auto-imports work and are scanned is identical to the [`composables/`](/docs/guide/directory-structure/composables) and [`utils/`](/docs/guide/directory-structure/utils) directories. The way `shared/utils` and `shared/types` auto-imports work and are scanned is identical to the [`composables/`](/docs/guide/directory-structure/composables) and [`utils/`](/docs/guide/directory-structure/utils) directories.