fix(schema): update webpack transformAssetUrls + pass hoistStatic to vite plugin (#26563)

packages/schema/build.config.ts

@@ -56,6 +56,7 @@ export default defineBuildConfig({
     '@vue/language-core',
     // Implicit
     '@vue/compiler-core',
+    '@vue/compiler-sfc',
     '@vue/shared',
     'untyped'
   ]

packages/schema/package.json

@@ -42,6 +42,7 @@
     "@vitejs/plugin-vue": "5.0.4",
     "@vitejs/plugin-vue-jsx": "3.1.0",
     "@vue/compiler-core": "3.4.21",
+    "@vue/compiler-sfc": "^3.4.21",
     "@vue/language-core": "2.0.7",
     "c12": "1.10.0",
     "esbuild-loader": "4.1.0",

packages/schema/src/config/app.ts

@@ -8,6 +8,14 @@ export default defineUntypedSchema({
    * Vue.js config
    */
   vue: {
+    /** @type {typeof import('@vue/compiler-sfc').AssetURLTagConfig} */
+    transformAssetUrls: {
+      video: ['src', 'poster'],
+      source: ['src'],
+      img: ['src'],
+      image: ['xlink:href', 'href'],
+      use: ['xlink:href', 'href']
+    },
     /**
      * Options for the Vue compiler that will be passed at build time.
      * @see [documentation](https://vuejs.org/api/application.html#app-config-compileroptions)

packages/schema/src/config/typescript.ts

@@ -43,6 +43,7 @@ export default defineUntypedSchema({
           '@unhead/vue',
           'vue',
           '@vue/runtime-core',
+          '@vue/compiler-sfc',
           '@vue/runtime-dom',
           'vue-router',
           '@nuxt/schema',

packages/schema/src/config/vite.ts

@@ -49,11 +49,17 @@ export default defineUntypedSchema({
       template: {
         compilerOptions: {
           $resolve: async (val, get) => val ?? (await get('vue') as Record<string, any>).compilerOptions
+        },
+        transformAssetUrls: {
+          $resolve: async (val, get) => val ?? (await get('vue') as Record<string, any>).transformAssetUrls
         }
       },
       script: {
         propsDestructure: {
           $resolve: async (val, get) => val ?? Boolean((await get('vue') as Record<string, any>).propsDestructure)
+        },
+        hoistStatic: {
+          $resolve: async (val, get) => val ?? (await get('vue') as Record<string, any>).compilerOptions?.hoistStatic
         }
       }
     },

packages/schema/src/config/webpack.ts

@@ -1,5 +1,6 @@
 import { defu } from 'defu'
 import { defineUntypedSchema } from 'untyped'
+import type { VueLoaderOptions } from 'vue-loader'
 
 export default defineUntypedSchema({
   webpack: {
@@ -200,14 +201,15 @@ export default defineUntypedSchema({
        */
       vue: {
         transformAssetUrls: {
-          video: 'src',
+          $resolve: async (val, get) => (val ?? (await get('vue.transformAssetUrls'))) as VueLoaderOptions['transformAssetUrls']
-          source: 'src',
-          object: 'src',
-          embed: 'src'
         },
-        compilerOptions: { $resolve: async (val, get) => val ?? (await get('vue.compilerOptions')) },
+        compilerOptions: {
-        propsDestructure: { $resolve: async (val, get) => val ?? Boolean(await get('vue.propsDestructure')) }
+          $resolve: async (val, get) => (val ?? (await get('vue.compilerOptions'))) as VueLoaderOptions['compilerOptions']
-      },
+        },
+        propsDestructure: {
+          $resolve: async (val, get) => Boolean(val ?? await get('vue.propsDestructure'))
+        }
+      } satisfies { [K in keyof VueLoaderOptions]: { $resolve: (val: unknown, get: (id: string) => Promise<unknown>) => Promise<VueLoaderOptions[K]> } },
 
       css: {
         importLoaders: 0,

packages/schema/src/types/config.ts

@@ -70,7 +70,7 @@ export type NuxtConfigLayer = ConfigLayer<NuxtConfig & {
 }>
 
 export interface NuxtBuilder {
-    bundle: (nuxt: Nuxt) => Promise<void>
+  bundle: (nuxt: Nuxt) => Promise<void>
 }
 
 // Normalized Nuxt options available as `nuxt.options.*`

packages/vite/src/vite.ts

@@ -112,17 +112,6 @@ export const bundle: NuxtBuilder['bundle'] = async (nuxt) => {
           }),
           virtual(nuxt.vfs)
         ],
-        vue: {
-          template: {
-            transformAssetUrls: {
-              video: ['src', 'poster'],
-              source: ['src'],
-              img: ['src'],
-              image: ['xlink:href', 'href'],
-              use: ['xlink:href', 'href']
-            }
-          }
-        },
         server: {
           watch: { ignored: isIgnored },
           fs: {

pnpm-lock.yaml

@@ -493,6 +493,9 @@ importers:
       '@vue/compiler-core':
         specifier: 3.4.21
         version: 3.4.21
+      '@vue/compiler-sfc':
+        specifier: ^3.4.21
+        version: 3.4.21
       '@vue/language-core':
         specifier: 2.0.7
         version: 2.0.7(typescript@5.4.3)
@@ -534,7 +537,7 @@ importers:
         version: 2.0.0
       vue-loader:
         specifier: 17.4.2
-        version: 17.4.2(vue@3.4.21)(webpack@5.91.0)
+        version: 17.4.2(@vue/compiler-sfc@3.4.21)(vue@3.4.21)(webpack@5.91.0)
       vue-router:
         specifier: 4.3.0
         version: 4.3.0(vue@3.4.21)
@@ -781,7 +784,7 @@ importers:
         version: 2.0.0
       vue-loader:
         specifier: ^17.4.2
-        version: 17.4.2(vue@3.4.21)(webpack@5.91.0)
+        version: 17.4.2(@vue/compiler-sfc@3.4.21)(vue@3.4.21)(webpack@5.91.0)
       webpack:
         specifier: ^5.91.0
         version: 5.91.0
@@ -11974,7 +11977,7 @@ packages:
       - supports-color
     dev: true
 
-  /vue-loader@17.4.2(vue@3.4.21)(webpack@5.91.0):
+  /vue-loader@17.4.2(@vue/compiler-sfc@3.4.21)(vue@3.4.21)(webpack@5.91.0):
     resolution: {integrity: sha512-yTKOA4R/VN4jqjw4y5HrynFL8AK0Z3/Jt7eOJXEitsm0GMRHDBjCfCiuTiLP7OESvsZYo2pATCWhDqxC5ZrM6w==}
     peerDependencies:
       '@vue/compiler-sfc': '*'
@@ -11986,6 +11989,7 @@ packages:
       vue:
         optional: true
     dependencies:
+      '@vue/compiler-sfc': 3.4.21
       chalk: 4.1.2
       hash-sum: 2.0.0
       vue: 3.4.21(typescript@5.4.3)