Nuxt•7d ago

Detected HTML unplugin-vue-i18n

<script lang="ts" setup>
const { t, locale } = useI18n();
<template>
<h1 v-html="t('title')"></h1>
</template>
<i18n>
{
  "ru": {

    "title": "Запускаю и <br />развиваю"  }
}
</i18n>

<script lang="ts" setup>
const { t, locale } = useI18n();
<template>
<h1 v-html="t('title')"></h1>
</template>
<i18n>
{
  "ru": {

    "title": "Запускаю и <br />развиваю"  }
}
</i18n>

I get error: "[unplugin-vue-i18n] Detected HTML in 'Запускаю и <br />развиваю' message. (error code: undefined) in " How can i fix it?

5 Replies

kapa.ai•7d ago

Hi @Yuri. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error you are seeing, [unplugin-vue-i18n] Detected HTML in ... message, occurs because by default, vue-i18n (and the unplugin-vue-i18n loader) does not allow raw HTML in translation messages for security reasons. To fix this, you need to allow HTML in your i18n configuration. In Nuxt 3, you can do this by setting the following options in your i18n config file (e.g., i18n.config.ts):

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'ru',
  escapeParameterHtml: false, // Allow HTML in translations
  warnHtmlMessage: false,     // Suppress HTML warning
  messages: {
    ru: {
      title: "Запускаю и <br />развиваю"
    }
  }
}))

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'ru',
  escapeParameterHtml: false, // Allow HTML in translations
  warnHtmlMessage: false,     // Suppress HTML warning
  messages: {
    ru: {
      title: "Запускаю и <br />развиваю"
    }
  }
}))

This configuration disables HTML escaping and warning messages, allowing you to use HTML tags like <br /> in your translations without errors. Make sure your Nuxt config references this file:

i18n: {
  vueI18n: './i18n.config.ts'
}

i18n: {
  vueI18n: './i18n.config.ts'
}

Note: Use this with caution, as allowing HTML in translations can introduce XSS vulnerabilities if your translation content is not fully trusted. This approach is confirmed in the knowledge sources, where similar issues are resolved by setting escapeParameterHtml: false and warnHtmlMessage: false in the i18n config file, allowing HTML in translation messages without errors or warnings Translation message can not contain stringified json Part 1 Translation message can not contain stringified json Part 2. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

<@740173469404364872> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

YuriOP•7d ago

@kapa.ai What is the best practice for the same situation? Do I need devie message into two messages?

kapa.ai•7d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The knowledge sources do not explicitly mention a "best practice" for handling HTML in translation messages with vue-i18n or Nuxt's unplugin-vue-i18n. However, based on the information provided, the recommended and safer approach is to avoid embedding raw HTML in your translation messages whenever possible. This helps prevent potential XSS vulnerabilities and keeps your translations clean and maintainable. If you need to insert line breaks or other HTML, a common best practice is to split the message into multiple parts and handle the formatting in your template, rather than in the translation string itself. For example, instead of:

"title": "Запускаю и <br />развиваю"

"title": "Запускаю и <br />развиваю"

You could use:

"title_line1": "Запускаю и"
"title_line2": "развиваю"

"title_line1": "Запускаю и"
"title_line2": "развиваю"

And in your template:

<h1>
  {{ t('title_line1') }}<br />
  {{ t('title_line2') }}
</h1>

<h1>
  {{ t('title_line1') }}<br />
  {{ t('title_line2') }}
</h1>

This approach keeps your translations free of HTML and makes them easier to manage and translate. If you must use HTML in your translations, ensure you trust your translation content and have set escapeParameterHtml: false and warnHtmlMessage: false in your i18n config, as described in the sources Translation message can not contain stringified json Part 1. Summary:
- Prefer splitting messages and handling formatting in the template. - Only use HTML in translations if absolutely necessary and you trust the content. The knowledge sources do not provide a strict rule, but this approach aligns with general i18n and security best practices. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

<@740173469404364872> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Detected HTML unplugin-vue-i18n

Did you find this page helpful?