fix: Devtools breaks unimport-vue-i18n when using HTML in string translations

[TheDutchCoder]

🐛 The bug

Vue-i18n allows HTML in string translations by setting strictMessage: false in the config. This allows users to easily embed HTML in their translations.

In SFC's you can add a <i18n> block with translations, but if those string contain HTML, Devtool attaches a data-v-inspector attribute and that breaks unimport-vue-i18n in the process.

I think the underlying issue is that the double quotes from the data attribute terminate the string?

🛠️ To reproduce

https://stackblitz.com/edit/nuxt3-issue-unplugin-vue-i18n-4dw9xe?file=nuxt.config.ts

🌈 Expected behavior

Devtools to not process HTML from string translations (or at least not to break them 😄 )

ℹ️ Additional context

Toggle the devtools on/off to see it works with the devtool disabled, but breaks with it enabled.

[arashsheyda]

You can fix it by disabling componentInspector:

devtools: {
    enabled: true,
    componentInspector: false,
  },

[TheDutchCoder]

@arashsheyda thanks, will this break/limit any of the devtools functionality? If so, then that wouldn't be great, of course.

[arashsheyda]

@TheDutchCoder unfortunately yes, you can't use the component inspector, as DevTools is using vite-plugin-vue-inspector for component inspection. but everything else would work just fine!

[TheDutchCoder]

@arashsheyda Ok, then let's leave this open as a bug, because we really would like to be able to use both 😉

[TheDutchCoder]

Any chance this could be picked up? Can we also remove the "has workaround" label? Disabling devtools is not really a "workaround" imo 😉