Cant resolve path

[julius-spudvilas]

I have been at this all day but it seems that plugin cant resolve path correctly as per README.md

Clean new VITE project with VUE

Vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import VitePluginSvgSpritemap from "@spiriit/vite-plugin-svg-spritemap";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), VitePluginSvgSpritemap("./src/svgIcons/*.svg")],
});

App.vue template

<template>
  <div>
    <svg>
      <use xlink:href="/__spritemap#sprite-circle-heat" />
    </svg>
  </div>
</template>

Console:
21.50.13 [vite] Internal server error: Failed to resolve import "/__spritemap" from "src/App.vue". Does the file exist?

Notes:
"../__spritemap#sprite-circle-heat" works on DEV but then cant be resolved on BUILD as it becomes "../assets/spritemap.197f1118.svg"

[dsine-de]

Is there a workaround to make this plugin work with Vue.js?

[dsine-de]

If there was an option for the production build like injectSVGOnDev, we could just use <svg><use href="#sprite-myicon"/></svg>

[dsine-de]

A workaround seems to be adding the following option to the Vue.js plugin in vite.config.js:

plugins: [
	vue({
		template: {
			transformAssetUrls: {use: []}
		}
	})
	...
]

Anyway it would be great to have an inline option or something like that, which disables the view and use output and just inlines the generated SVG into the index.html body so no additional request is needed to load the svg spritemap and to be able to use just <svg><use href="#sprite-myicon"/></svg> to reference the sprites.

[dsvgl]

@julius-spudvilas I just stumbled upon the same thing (I think).
I had the production build fail for such a case in a Nuxt 3 server component. In dev it worked without issues. Not sure if it really is the same problem.
What I did to make the build succeed: make the xlink:href a v-bind and wrap the value with single quotes to just be a string. Vite then can correctly resolves the import. Strange 🤷🏻‍♂️

<template>
  <div>
    <svg>
      <use :xlink:href="'/__spritemap#sprite-circle-heat'" />
    </svg>
  </div>
</template>

[ChrisAdels]

@dsvgl I guess the solution of @dsine-de is better. But more or less the same thing happens. By default, Vue automatically converts static asset URLs (like the src in <img src="./logo.png">) into JavaScript module imports so that Vite can bundle them and add cache-busting hashes to their filenames. transformAssetUrls: {use: []} prevents it from being transformed. With a v-bind its an dynamic asset URL