From d37cca66107052561dfcd3265bdd0d8a623df8c3 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Wed, 28 Aug 2024 21:13:08 +0200
Subject: [PATCH] feat(nuxt): use correct name for auto-imported components

---
 packages/nuxt/src/components/loader.ts | 8 ++++++--
 packages/nuxt/src/components/module.ts | 2 ++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/nuxt/src/components/loader.ts b/packages/nuxt/src/components/loader.ts
index b8e5d38b62..8cecd9b5e4 100644
--- a/packages/nuxt/src/components/loader.ts
+++ b/packages/nuxt/src/components/loader.ts
@@ -15,6 +15,7 @@ interface LoaderOptions {
   sourcemap?: boolean
   transform?: ComponentsOptions['transform']
   experimentalComponentIslands?: boolean
+  isDev: boolean
 }
 
 export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
@@ -74,10 +75,13 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
           if (lazy) {
             imports.add(genImport('vue', [{ name: 'defineAsyncComponent', as: '__defineAsyncComponent' }]))
             identifier += '_lazy'
-            imports.add(`const ${identifier} = __defineAsyncComponent(${genDynamicImport(component.filePath, { interopDefault: false })}.then(c => c.${component.export ?? 'default'} || c)${isClientOnly ? '.then(c => createClientOnly(c))' : ''})`)
+            imports.add(`const ${identifier} = __defineAsyncComponent(${genDynamicImport(component.filePath, { interopDefault: false })}.then(c => ${options.isDev ? `({...(c.${component.export ?? 'default'} || c), name: ${component.pascalName}})` : `c.${component.export ?? 'default'} || c`})${isClientOnly ? '.then(c => createClientOnly(c))' : ''})`)
           } else {
             imports.add(genImport(component.filePath, [{ name: component._raw ? 'default' : component.export, as: identifier }]))
-
+            if (options.isDev) {
+              imports.add(`const ${identifier}_dev = Object.assign(${identifier}, { name: '${component.pascalName}' })`)
+              identifier += '_dev'
+            }
             if (isClientOnly) {
               imports.add(`const ${identifier}_wrapped = createClientOnly(${identifier})`)
               identifier += '_wrapped'
diff --git a/packages/nuxt/src/components/module.ts b/packages/nuxt/src/components/module.ts
index c42ab16aae..774243f64c 100644
--- a/packages/nuxt/src/components/module.ts
+++ b/packages/nuxt/src/components/module.ts
@@ -230,6 +230,7 @@ export default defineNuxtModule<ComponentsOptions>({
         mode,
         transform: typeof nuxt.options.components === 'object' && !Array.isArray(nuxt.options.components) ? nuxt.options.components.transform : undefined,
         experimentalComponentIslands: !!nuxt.options.experimental.componentIslands,
+        isDev: nuxt.options.dev,
       }))
 
       if (nuxt.options.experimental.componentIslands) {
@@ -299,6 +300,7 @@ export default defineNuxtModule<ComponentsOptions>({
           mode,
           transform: typeof nuxt.options.components === 'object' && !Array.isArray(nuxt.options.components) ? nuxt.options.components.transform : undefined,
           experimentalComponentIslands: !!nuxt.options.experimental.componentIslands,
+          isDev: nuxt.options.dev,
         }))
 
         if (nuxt.options.experimental.componentIslands) {