eslint-plugin-vue

Appearance

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

disallow v-text / v-html on component

  • ⚙️ This rule is included in all of "plugin:vue/vue2-essential", *.configs["flat/vue2-essential"], "plugin:vue/essential", *.configs["flat/essential"], "plugin:vue/vue2-strongly-recommended", *.configs["flat/vue2-strongly-recommended"], "plugin:vue/strongly-recommended", *.configs["flat/strongly-recommended"], "plugin:vue/vue2-recommended", *.configs["flat/vue2-recommended"], "plugin:vue/recommended" and *.configs["flat/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.

<template> <!-- ✓ GOOD --> <div v-text="content"></div> <div v-html="html"></div> <svg><g v-text="content" /></svg> <math><mi v-text="content" /></math> <MyComponent>{{ content }}</MyComponent> <!-- ✗ BAD --> <MyComponent v-text="content"></MyComponent> <MyComponent v-html="html"></MyComponent> <g v-text="content" /> <mi v-text="content" /> </template>
Now loading...

🔧 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.
<template> <!-- ✓ GOOD --> <router-link v-html="content" /> <NuxtLink v-html="content" /> <!-- ✗ BAD --> <MyComponent v-html="content" /> </template>
Now loading...

{ "ignoreElementNamespaces": true } ​

<template> <!-- ✓ GOOD --> <g v-text="content" /> <!-- SVG element not inside of <svg> --> <mi v-text="content" /> <!-- MathML element not inside of <math> --> </template>
Now loading...

🚀 Version ​

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

🔍 Implementation ​