diff --git a/docs/content/2.guide/2.directory-structure/1.composables.md b/docs/content/2.guide/2.directory-structure/1.composables.md index ee087f4481f..a72160895d2 100644 --- a/docs/content/2.guide/2.directory-structure/1.composables.md +++ b/docs/content/2.guide/2.directory-structure/1.composables.md @@ -11,7 +11,7 @@ Nuxt 3 uses the `composables/` directory to automatically import your Vue compos Under the hood, Nuxt auto generates the file `.nuxt/imports.d.ts` to declare the types. -Be aware that you have to run `nuxi prepare`, `nuxi dev` or `nuxi build` in order to let Nuxt generates the types. If you create a composable without having the dev server running, typescript will throw an error `Cannot find name 'useBar'.` +Be aware that you have to run `nuxi prepare`, `nuxi dev` or `nuxi build` in order to let Nuxt generate the types. If you create a composable without having the dev server running, TypeScript will throw an error, such as `Cannot find name 'useBar'.` ## Usage diff --git a/docs/content/2.guide/2.directory-structure/1.utils.md b/docs/content/2.guide/2.directory-structure/1.utils.md new file mode 100644 index 00000000000..d73223b457a --- /dev/null +++ b/docs/content/2.guide/2.directory-structure/1.utils.md @@ -0,0 +1,16 @@ +--- +navigation.icon: IconDirectory +title: 'utils' +head.title: Utils +description: Use the utils/ directory to auto-import your utility functions throughout your application. +--- + +# Utils Directory + +Nuxt 3 uses the `utils/` directory to automatically import helper functions and other utilities throughout your application using [auto-imports](/guide/concepts/auto-imports)! + +::alert{type=info} +The main purpose of the `utils/` directory is to allow a semantic distinction between your Vue composables and other auto-imported utility functions. + +The way `utils/` auto-imports work and are scanned is identical to [the composables/ directory](/guide/directory-structure/composables). You can see examples and more information about how they work in that section of the docs. +:: diff --git a/packages/nuxi/src/commands/dev.ts b/packages/nuxi/src/commands/dev.ts index 6864894555c..ce4845c9d24 100644 --- a/packages/nuxi/src/commands/dev.ts +++ b/packages/nuxi/src/commands/dev.ts @@ -131,7 +131,7 @@ export default defineNuxtCommand({ const isDirChange = ['addDir', 'unlinkDir'].includes(event) const isFileChange = ['add', 'unlink'].includes(event) const pagesDir = resolve(currentNuxt.options.srcDir, currentNuxt.options.dir.pages) - const reloadDirs = ['components', 'composables'].map(d => resolve(currentNuxt.options.srcDir, d)) + const reloadDirs = ['components', 'composables', 'utils'].map(d => resolve(currentNuxt.options.srcDir, d)) if (isDirChange) { if (reloadDirs.includes(file)) { diff --git a/packages/nuxt/src/imports/module.ts b/packages/nuxt/src/imports/module.ts index f9bd39bb651..b18e824a8bc 100644 --- a/packages/nuxt/src/imports/module.ts +++ b/packages/nuxt/src/imports/module.ts @@ -59,6 +59,7 @@ export default defineNuxtModule>({ let composablesDirs: string[] = [] for (const layer of nuxt.options._layers) { composablesDirs.push(resolve(layer.config.srcDir, 'composables')) + composablesDirs.push(resolve(layer.config.srcDir, 'utils')) for (const dir of (layer.config.imports?.dirs ?? [])) { if (!dir) { continue diff --git a/packages/schema/src/types/imports.ts b/packages/schema/src/types/imports.ts index af72b597073..bad072a2dbc 100644 --- a/packages/schema/src/types/imports.ts +++ b/packages/schema/src/types/imports.ts @@ -13,7 +13,7 @@ export interface ImportsOptions extends UnimportOptions { * Directories to scan for auto imports. * * @see https://v3.nuxtjs.org/guide/directory-structure/composables/#how-files-are-scanned - * @default ['./composables'] + * @default ['./composables', './utils'] */ dirs?: string[] diff --git a/test/fixtures/basic/composables/useBar.ts b/test/fixtures/basic/utils/useBar.ts similarity index 100% rename from test/fixtures/basic/composables/useBar.ts rename to test/fixtures/basic/utils/useBar.ts