fix: Devtools breaks unimport-vue-i18n when using HTML in string translations
TheDutchCoder opened this issue · comments
🐛 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.
You can fix it by disabling componentInspector:
devtools: {
enabled: true,
componentInspector: false,
},
@arashsheyda thanks, will this break/limit any of the devtools functionality?
If so, then that wouldn't be great, of course.
@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!
@arashsheyda Ok, then let's leave this open as a bug, because we really would like to be able to use both 😉
Any chance this could be picked up?
Can we also remove the "has workaround" label? Disabling devtools is not really a "workaround" imo 😉