eslint-plugin-vue

Appearance

vue/no-v-text-v-html-on-component ​

disallow v-text / v-html on component

  • ⚙️ This rule is included in the following preset configs:
    • *.configs["flat/vue2-essential"]
    • *.configs["flat/essential"]
    • *.configs["flat/vue2-strongly-recommended"]
    • *.configs["flat/strongly-recommended"]
    • *.configs["flat/vue2-recommended"]
    • *.configs["flat/recommended"]
    • "plugin:vue/vue2-essential"
    • "plugin:vue/essential"
    • "plugin:vue/vue2-strongly-recommended"
    • "plugin:vue/strongly-recommended"
    • "plugin:vue/vue2-recommended"
    • "plugin:vue/recommended"

📖 Rule Details ​

This rule disallows the use of v-text / v-html on component.

If you use v-text / v-html on a component, it will overwrite the component's content and may break the component.

Now loading...

v-text / v-html on a component don't fill its slot. They are passed as textContent / innerHTML and fall through to the component's root element, so everything inside that element is replaced. If the root element contains nothing but the default <slot />, the result looks the same as passing slot content, but any wrapper, icon or child component inside it is lost. If the component has several root nodes, Vue drops the content and warns about extraneous attributes.

This rule can't see the component's template, so it reports every component. If a component's root element only renders its default slot (like <router-link>, which renders <a><slot /></a>), you can add it to the allow option below.

🔧 Options ​

json
{
  "vue/no-v-text-v-html-on-component": ["error", {
    "allow": ["router-link", "nuxt-link"],
    "ignoreElementNamespaces": false
  }]
}
  • allow (string[]) ... Specify a list of custom components for which the rule should not apply.
  • ignoreElementNamespaces (boolean) ... If true, always treat SVG and MathML tag names as HTML elements, even if they are not used inside a SVG/MathML root element. Default is false.
Now loading...

{ "ignoreElementNamespaces": true } ​

Now loading...

🚀 Version ​

This rule was introduced in eslint-plugin-vue v8.4.0

🔍 Implementation ​