feat!(nuxt3): extends support for composables/ directory (#3423)

Co-authored-by: pooya parsa <pyapar@gmail.com>

examples/config-extends/app.vue

@@ -1,5 +1,7 @@
 <script setup>
 const themeConfig = useRuntimeConfig().theme
+const foo = useFoo()
+const bar = getBar()
 </script>
 
 <template>
@@ -8,6 +10,9 @@ const themeConfig = useRuntimeConfig().theme
     <pre>{{ JSON.stringify(themeConfig, null, 2) }}</pre>
     <BaseButton>Base Button</BaseButton>
     <FancyButton>Fancy Button</FancyButton>
+    <br>
+    {{ foo }} {{ bar }}
+    <br>
     {{ $myPlugin() }}
   </NuxtExampleLayout>
 </template>

examples/config-extends/base/composables/foo.ts

@@ -0,0 +1,3 @@
+import { useState } from '#app'
+
+export const useFoo = () => useState('foo', () => 'foo')

examples/config-extends/base/nuxt.config.ts

@@ -1,6 +1,9 @@
 import { defineNuxtConfig } from 'nuxt3'
 
 export default defineNuxtConfig({
+  autoImports: {
+    dirs: ['utils']
+  },
   publicRuntimeConfig: {
     theme: {
       primaryColor: 'base_primary',

examples/config-extends/base/utils/bar.ts

@@ -0,0 +1 @@
+export const getBar = () => 'bar'

packages/bridge/src/module.ts

@@ -41,6 +41,9 @@ export default defineNuxtModule({
       nuxtCtx.set(nuxt)
     }
 
+    // Mock _extends
+    nuxt.options._extends = nuxt.options._extends || []
+
     if (opts.nitro) {
       await setupNitroBridge()
     }

packages/nuxt3/src/auto-imports/module.ts

@@ -36,6 +36,15 @@ export default defineNuxtModule<AutoImportsOptions>({
       join(nuxt.options.srcDir, 'composables'),
       ...options.dirs
     ]
+
+    // Extend with layers
+    for (const layer of nuxt.options._extends) {
+      composablesDirs.push(resolve(layer.config.srcDir, 'composables'))
+      for (const dir of (layer.config.autoImports?.dirs ?? [])) {
+        composablesDirs.push(resolve(layer.config.srcDir, dir))
+      }
+    }
+
     await nuxt.callHook('autoImports:dirs', composablesDirs)
     composablesDirs = composablesDirs.map(dir => normalize(dir))