fix: Devtools breaks unimport-vue-i18n when using HTML in string translations
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.3k
- Forks
- 214
- Avg merge
- 13h 22m
- Merged PRs (30d)
- 18
Description
🐛 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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked StackBlitz reproduction and compare behavior with Devtools enabled and disabled. Trace how Devtools processes blocks containing HTML, then verify that string translations remain valid when Devtools is enabled.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, typescript
- Domain
- devtools, internationalization
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100