fix(nuxt3): generate imports for components with named exports correctly (#3288)

packages/nuxt3/src/components/loader.ts

@@ -37,7 +37,7 @@ function transform (content: string, components: Component[]) {
     if (component) {
       const identifier = map.get(component) || `__nuxt_component_${num++}`
       map.set(component, identifier)
-      imports += genImport(component.filePath, identifier)
+      imports += genImport(component.filePath, [{ name: component.export, as: identifier }])
       return ` ${identifier}`
     }
     // no matched

test/fixtures/basic/nuxt.config.ts

@@ -1,4 +1,5 @@
 import { defineNuxtConfig } from 'nuxt3'
+import { addComponent } from '@nuxt/kit'
 
 export default defineNuxtConfig({
   buildDir: process.env.NITRO_BUILD_DIR,
@@ -9,5 +10,14 @@ export default defineNuxtConfig({
     // @ts-ignore TODO: Fix schema types
     testConfig: '123'
   },
-  modules: ['~/modules/example']
+  modules: ['~/modules/example'],
+  hooks: {
+    'modules:done' () {
+      addComponent({
+        name: 'CustomComponent',
+        export: 'namedExport',
+        filePath: '~/other-components-folder/named-export'
+      })
+    }
+  }
 })

test/fixtures/basic/other-components-folder/named-export.ts

@@ -0,0 +1,3 @@
+export const namedExport = defineComponent({
+  setup: () => () => h('div', 'This is a custom component with a named export.')
+})

test/fixtures/basic/pages/index.vue

@@ -5,6 +5,7 @@
     </Head>
     <h1>Hello Vue 3</h1>
     <div>Config: {{ $config.testConfig }}</div>
+    <CustomComponent />
   </div>
 </template>