feat(nuxt): auto-import utils/ directory (#8817)

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
 

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.
+::

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)) {

packages/nuxt/src/imports/module.ts

@@ -59,6 +59,7 @@ export default defineNuxtModule<Partial<ImportsOptions>>({
     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

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[]