vuetifyjs / vue-cli-plugins

🔌 A collection of Vuetify plugins for Vue CLI
https://vuetifyjs.com/en/getting-started/quick-start#vue-cli-3
Other
427 stars 113 forks source link

vue-cli-plugin-vuetify breaks relative asset path transforms #345

Open mediafreakch opened 1 year ago

mediafreakch commented 1 year ago

Problem description

vue-loader provides a mechanism to transform a relative asset path inside a template to a javascript module:

// source
<template>
  <img src="../image.png" />
</template>

// result after transform
createElement('img', { attrs: { src: require('../image.png') // this is now a module request } })

This works on a new vue-cli project (without vuetify-plugin). But it breaks as soon as the vuetify plugin is added.
As a result, the relative path isn't transformed and this results in a 404 when the app is rendered.

Example

The behaviour can be reproduced here: https://stackblitz.com/edit/github-ahnvys-fgocjn?file=src/components/HelloWorld.vue

Workaround

The workaround is to use :src="require('./{assetPath}')" . However I think this is a bug that should be fixed or documented. I spent hours debugging after upgrading from vuetify 2 to v3.

sarahLardeau commented 1 year ago

I got the same issue ! Could it be fixed ? The workaround works but it remains a workaround. It is not great to need to change all our asset paths during the migration... 😕