Vue 3 + ESLint warning [intlify] Detected HTML

Question

Getting a warning inside the console "[intlify] Detected HTML in .....", but can't figure out how to disable this warning for this specific line. I've also tried to change the eslintrc.js file to disable all v-html warnings but didn't work out.

dependencies

    "vue": "^3.0.0",
    "vue-i18n": "^9.2.0-beta.15",

devDependencies

    "@vue/cli-plugin-babel": "^4.5.14",
    "@vue/cli-plugin-eslint": "^4.5.14",
    "@vue/cli-service": "^4.5.14",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-standard": "^6.1.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.32.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.3.1",
    "eslint-plugin-vue": "^7.19.1",

Eslint config file

  extends: [
    'standard',
    'eslint:recommended',
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint',
    impliedStrict: true
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-new': 'off',
    'no-var': 'off',
    indent: ['error', 2],
    semi: 0
  },

Saltern

Answer 1

Update 2022:

With Vue-I18n Version 9+, there are two different settings depending on the used mode:

• Setting for the composition API mode:

  warnHtmlMessage: false
  

• Setting for the legacy API mode:

  warnHtmlInMessage: "off"
  

---

Citation from the Vue-I18n V9 Release Notes

In Vue I18n v8.x, the value of warnHtmlInMessage was "off". Therefore, by default, no warning is output to the console even if the message contains HTML.

In Vue I18n v9 or later, change the default values as follows:

• Legacy API mode: warnHtmlInMessage property: "warn"
• Composition API mode: warnHtmlMessage boolean property, default true

Guttural

Damn this is it. I only noticed the subtle difference between these two string thanks to your answer. Cheers ! – Faretheewell

Answer 2

for vue i18N v9.x or later version, you can use "warnHtmlMessage" option in the demo code.

const i18n = setupI18n({
  globalInjection: true,
  legacy: false,
  warnHtmlMessage: false, // disable warning HTML in message
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en
  }
})

Cauca

Answer 3

This comes from warnHtmlInMessage vue i18n , what you need to change is the options of it when you create it.

Probably you will have a createI18n or a VueI18n method somewhere. In there you can disable it like:

createI18n({
    warnHtmlInMessage: 'off' // disable of the Detected HTML in message
});

Sandy

If this does not work for you, you probably have a never version of Vue18n. See answer from Boy.Lee, property name and value have changed. – Chaplin