Skip to content
This repository was archived by the owner on May 8, 2025. It is now read-only.
This repository was archived by the owner on May 8, 2025. It is now read-only.

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

@mediafreakch

Description

@mediafreakch

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions