fix(nuxt): auto import for components with external template (#6053)

packages/nuxt/src/auto-imports/transform.ts

@@ -11,7 +11,7 @@ export const TransformPlugin = createUnplugin(({ ctx, options, sourcemap }: {ctx
     enforce: 'post',
     transformInclude (id) {
       const { pathname, search } = parseURL(decodeURIComponent(pathToFileURL(id).href))
-      const { type, macro } = parseQuery(search)
+      const query = parseQuery(search)
 
       // Included
       if (options.transform?.include?.some(pattern => id.match(pattern))) {
@@ -24,8 +24,9 @@ export const TransformPlugin = createUnplugin(({ ctx, options, sourcemap }: {ctx
 
       // Vue files
       if (
-        pathname.endsWith('.vue') &&
-        (type === 'template' || type === 'script' || macro || !search)
+        id.endsWith('.vue') ||
+        'macro' in query ||
+        ('vue' in query && (query.type === 'template' || query.type === 'script' || 'setup' in query))
       ) {
         return true
       }

packages/nuxt/src/components/loader.ts

@@ -13,6 +13,33 @@ interface LoaderOptions {
   transform?: ComponentsOptions['transform']
 }
 
+function isVueTemplate (id: string) {
+  // Bare `.vue` file (in Vite)
+  if (id.endsWith('.vue')) {
+    return true
+  }
+
+  const { search } = parseURL(decodeURIComponent(pathToFileURL(id).href))
+  if (!search) {
+    return false
+  }
+
+  const query = parseQuery(search)
+
+  // Macro
+  if (query.macro) {
+    return true
+  }
+
+  // Non-Vue or Styles
+  if (!('vue' in query) || query.type === 'style') {
+    return false
+  }
+
+  // Query `?vue&type=template` (in Webpack or external template)
+  return true
+}
+
 export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
   const exclude = options.transform?.exclude || []
   const include = options.transform?.include || []
@@ -27,12 +54,7 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
       if (include.some(pattern => id.match(pattern))) {
         return true
       }
-
-      const { pathname, search } = parseURL(decodeURIComponent(pathToFileURL(id).href))
-      const query = parseQuery(search)
-      // we only transform render functions
-      // from `type=template` (in Webpack), bare `.vue` file and setup=true (Vite 2/3)
-      return pathname.endsWith('.vue') && (query.type === 'template' || !!query.macro || !!query.setup || !search)
+      return isVueTemplate(id)
     },
     transform (code, id) {
       const components = options.getComponents()