From 75f4277f5961de1aeff3d921eef85280f4f4c307 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Tue, 8 Nov 2022 15:41:46 +0100 Subject: [PATCH 1/5] feat(nuxt): auto-import `utils/` directory --- packages/nuxi/src/commands/dev.ts | 2 +- packages/nuxt/src/imports/module.ts | 1 + packages/schema/src/types/imports.ts | 2 +- test/fixtures/basic/{composables => utils}/useBar.ts | 0 4 files changed, 3 insertions(+), 2 deletions(-) rename test/fixtures/basic/{composables => utils}/useBar.ts (100%) 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 From 10c4678206eef7216fffcbd1c652cc6c9cc7707d Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Tue, 8 Nov 2022 15:47:15 +0100 Subject: [PATCH 2/5] docs: update docs to mention `utils/` --- docs/content/2.guide/2.directory-structure/1.composables.md | 4 ++-- docs/content/2.guide/2.directory-structure/3.utils.md | 5 +++++ 2 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 docs/content/2.guide/2.directory-structure/3.utils.md 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..8953116840e 100644 --- a/docs/content/2.guide/2.directory-structure/1.composables.md +++ b/docs/content/2.guide/2.directory-structure/1.composables.md @@ -5,9 +5,9 @@ head.title: Composables description: Use the composables/ directory to auto-import your Vue composables into your application. --- -# Composables Directory +# Composables Directories -Nuxt 3 uses the `composables/` directory to automatically import your Vue composables into your application using [auto-imports](/guide/concepts/auto-imports)! +Nuxt 3 uses the `composables/` and `utils/` directories to automatically import your Vue composables into your application using [auto-imports](/guide/concepts/auto-imports)! Under the hood, Nuxt auto generates the file `.nuxt/imports.d.ts` to declare the types. diff --git a/docs/content/2.guide/2.directory-structure/3.utils.md b/docs/content/2.guide/2.directory-structure/3.utils.md new file mode 100644 index 00000000000..271dffdc04a --- /dev/null +++ b/docs/content/2.guide/2.directory-structure/3.utils.md @@ -0,0 +1,5 @@ +--- +navigation.icon: IconDirectory +title: 'utils' +redirect: /guide/directory-structure/composables +--- From 5725193158082b4a3cc72c3ec9b595c053c306cb Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Tue, 8 Nov 2022 16:29:08 +0100 Subject: [PATCH 3/5] chore: add redirect --- docs/public/_redirects | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/public/_redirects b/docs/public/_redirects index bcf4ce6f6be..d683441a36f 100644 --- a/docs/public/_redirects +++ b/docs/public/_redirects @@ -7,6 +7,7 @@ /bridge /bridge/overview 302! /guide /guide/concepts/auto-imports 302! /guide/concepts /guide/concepts/auto-imports 302! +/guide/directory-structure/utils /guide/directory-structure/composables 302! # Concepts /concepts/introduction /getting-started/introduction 302! From 9ecea47c7c82a766a850aa8bc79e03cd962d36fc Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Tue, 8 Nov 2022 16:30:35 +0100 Subject: [PATCH 4/5] docs: move into folders list --- .../2.guide/2.directory-structure/{3.utils.md => 1.utils.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename docs/content/2.guide/2.directory-structure/{3.utils.md => 1.utils.md} (100%) diff --git a/docs/content/2.guide/2.directory-structure/3.utils.md b/docs/content/2.guide/2.directory-structure/1.utils.md similarity index 100% rename from docs/content/2.guide/2.directory-structure/3.utils.md rename to docs/content/2.guide/2.directory-structure/1.utils.md From fa72fc0fc4cf7868a95d8940b02dc3527bf42b36 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Wed, 9 Nov 2022 10:32:00 +0100 Subject: [PATCH 5/5] docs: add some basic information about `utils/` --- .../2.guide/2.directory-structure/1.composables.md | 6 +++--- .../2.guide/2.directory-structure/1.utils.md | 13 ++++++++++++- docs/public/_redirects | 1 - 3 files changed, 15 insertions(+), 5 deletions(-) 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 8953116840e..a72160895d2 100644 --- a/docs/content/2.guide/2.directory-structure/1.composables.md +++ b/docs/content/2.guide/2.directory-structure/1.composables.md @@ -5,13 +5,13 @@ head.title: Composables description: Use the composables/ directory to auto-import your Vue composables into your application. --- -# Composables Directories +# Composables Directory -Nuxt 3 uses the `composables/` and `utils/` directories to automatically import your Vue composables into your application using [auto-imports](/guide/concepts/auto-imports)! +Nuxt 3 uses the `composables/` directory to automatically import your Vue composables into your application using [auto-imports](/guide/concepts/auto-imports)! 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 index 271dffdc04a..d73223b457a 100644 --- a/docs/content/2.guide/2.directory-structure/1.utils.md +++ b/docs/content/2.guide/2.directory-structure/1.utils.md @@ -1,5 +1,16 @@ --- navigation.icon: IconDirectory title: 'utils' -redirect: /guide/directory-structure/composables +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/docs/public/_redirects b/docs/public/_redirects index d683441a36f..bcf4ce6f6be 100644 --- a/docs/public/_redirects +++ b/docs/public/_redirects @@ -7,7 +7,6 @@ /bridge /bridge/overview 302! /guide /guide/concepts/auto-imports 302! /guide/concepts /guide/concepts/auto-imports 302! -/guide/directory-structure/utils /guide/directory-structure/composables 302! # Concepts /concepts/introduction /getting-started/introduction 302!