fix: transformAssetUrls stops working (#221)

* fix: `transformAssetUrls` stops working * chore: move logic to `vite:extendConfig` hook * chore: cleanup * chore: .
userquin · Apr 26, 2024 · b52d700 · b52d700
1 parent 080559c
commit b52d700
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 16 deletions.
diff --git a/src/utils/configure-nuxt.ts b/src/utils/configure-nuxt.ts
@@ -1,12 +1,9 @@
 import type { Nuxt } from '@nuxt/schema'
 import { addImports, addPlugin, extendWebpackConfig } from '@nuxt/kit'
-import { transformAssetUrls } from 'vite-plugin-vuetify'
-import defu from 'defu'
-
 import { RESOLVED_VIRTUAL_MODULES } from '../vite/constants'
 import type { VuetifyNuxtContext } from './config'
 import { addVuetifyNuxtPlugins } from './vuetify-nuxt-plugins'
-import { normalizeTransformAssetUrls, toKebabCase } from './index'
+import { toKebabCase } from './index'
 
 export function configureNuxt(
   configKey: string,
@@ -16,7 +13,6 @@ export function configureNuxt(
   const {
     importComposables,
     prefixComposables,
-    includeTransformAssetsUrls = true,
   } = ctx.moduleOptions
 
   const runtimeDir = ctx.resolver.resolve('./runtime')
@@ -38,16 +34,6 @@ export function configureNuxt(
   // always add vuetify/styles
   nuxt.options.css.unshift('vuetify/styles')
 
-  if (includeTransformAssetsUrls && typeof nuxt.options.vite.vue?.template?.transformAssetUrls === 'undefined') {
-    nuxt.options.vite.vue ??= {}
-    nuxt.options.vite.vue.template ??= {}
-    nuxt.options.vite.vue.template.transformAssetUrls = normalizeTransformAssetUrls(
-      typeof includeTransformAssetsUrls === 'object'
-        ? defu(includeTransformAssetsUrls, transformAssetUrls)
-        : transformAssetUrls,
-    )
-  }
-
   extendWebpackConfig(() => {
     throw new Error('Webpack is not supported: vuetify-nuxt-module module can only be used with Vite!')
   })

diff --git a/src/utils/configure-vite.ts b/src/utils/configure-vite.ts
@@ -1,5 +1,7 @@
 import type { Nuxt } from '@nuxt/schema'
 import defu from 'defu'
+import type { AssetURLOptions } from '@vue/compiler-sfc'
+import { transformAssetUrls as vuetifyTransformAssetUrls } from 'vite-plugin-vuetify'
 import { vuetifyStylesPlugin } from '../vite/vuetify-styles-plugin'
 import { vuetifyConfigurationPlugin } from '../vite/vuetify-configuration-plugin'
 import { vuetifyIconsPlugin } from '../vite/vuetify-icons-configuration-plugin'
@@ -8,6 +10,7 @@ import { vuetifySSRClientHintsPlugin } from '../vite/vuetify-ssr-client-hints-pl
 import { vuetifyImportPlugin } from '../vite/vuetify-import-plugin'
 import { checkVuetifyPlugins } from './module'
 import type { VuetifyNuxtContext } from './config'
+import { normalizeTransformAssetUrls } from './index'
 
 export function configureVite(configKey: string, nuxt: Nuxt, ctx: VuetifyNuxtContext) {
   nuxt.hook('vite:extend', ({ config }) => checkVuetifyPlugins(config))
@@ -30,8 +33,40 @@ export function configureVite(configKey: string, nuxt: Nuxt, ctx: VuetifyNuxtCon
       ]
     }
 
+    const { includeTransformAssetsUrls, styles } = ctx.moduleOptions
+    if (includeTransformAssetsUrls) {
+      viteInlineConfig.vue ??= {}
+      viteInlineConfig.vue.template ??= {}
+      let existingTransformAssetUrls = viteInlineConfig.vue.template.transformAssetUrls ?? {}
+      let useURLOptions: AssetURLOptions | undefined
+      if (typeof existingTransformAssetUrls === 'boolean') {
+        existingTransformAssetUrls = {}
+      }
+      else if ('base' in existingTransformAssetUrls || 'includeAbsolute' in existingTransformAssetUrls || 'tags' in existingTransformAssetUrls) {
+        useURLOptions = {
+          base: existingTransformAssetUrls.base as string | undefined,
+          includeAbsolute: existingTransformAssetUrls.includeAbsolute as boolean | undefined,
+        }
+        existingTransformAssetUrls = (existingTransformAssetUrls.tags ?? {}) as Record<string, string[]>
+      }
+
+      const transformAssetUrls = normalizeTransformAssetUrls(
+        typeof includeTransformAssetsUrls === 'object'
+          ? defu(existingTransformAssetUrls, vuetifyTransformAssetUrls, includeTransformAssetsUrls)
+          : defu(existingTransformAssetUrls, vuetifyTransformAssetUrls),
+      )
+
+      if (useURLOptions) {
+        useURLOptions.tags = transformAssetUrls
+        viteInlineConfig.vue.template.transformAssetUrls = useURLOptions
+      }
+      else {
+        viteInlineConfig.vue.template.transformAssetUrls = transformAssetUrls
+      }
+    }
+
     viteInlineConfig.plugins.push(vuetifyImportPlugin({}))
-    viteInlineConfig.plugins.push(vuetifyStylesPlugin({ styles: ctx.moduleOptions.styles }, ctx.logger))
+    viteInlineConfig.plugins.push(vuetifyStylesPlugin({ styles }, ctx.logger))
     viteInlineConfig.plugins.push(vuetifyConfigurationPlugin(ctx))
     viteInlineConfig.plugins.push(vuetifyIconsPlugin(ctx))
     viteInlineConfig.plugins.push(vuetifyDateConfigurationPlugin(ctx))