fix(nuxt): allow overriding lower layer composables (#10017)

packages/nuxt/src/imports/module.ts

@@ -72,11 +72,17 @@ export default defineNuxtModule<Partial<ImportsOptions>>({
     addVitePlugin(TransformPlugin.vite({ ctx, options, sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client }))
     addWebpackPlugin(TransformPlugin.webpack({ ctx, options, sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client }))
 
+    const priorities = nuxt.options._layers.map((layer, i) => [layer.config.srcDir, -i] as const).sort(([a], [b]) => b.length - a.length)
+
     const regenerateImports = async () => {
       ctx.clearDynamicImports()
       await ctx.modifyDynamicImports(async (imports) => {
         // Scan composables/
-        imports.push(...await scanDirExports(composablesDirs))
+        const composableImports = await scanDirExports(composablesDirs)
+        for (const i of composableImports) {
+          i.priority = i.priority || priorities.find(([dir]) => i.from.startsWith(dir))?.[1]
+        }
+        imports.push(...composableImports)
         // Modules extending
         await nuxt.callHook('imports:extend', imports)
       })

test/basic.test.ts

@@ -487,6 +487,10 @@ describe('extends support', () => {
       const html = await $fetch('/foo')
       expect(html).toContain('Composable | useExtendsFoo: foo')
     })
+    it('allows overriding composables', async () => {
+      const html = await $fetch('/extends')
+      expect(html).toContain('test from project')
+    })
   })
 
   describe('plugins', () => {

test/fixtures/basic/composables/override-base.ts

@@ -0,0 +1 @@
+export const useOverrideableComposable = () => 'test from project'

test/fixtures/basic/extends/bar/composables/base.ts

@@ -0,0 +1 @@
+export const useOverrideableComposable = () => 'test from layer'

test/fixtures/basic/pages/extends.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    {{ useOverrideableComposable() }}
+  </div>
+</template>