JS.VUE.NO.RESTRICTED.HTML.ELEMENTS

Rule Details

This rule allows you to specify HTML elements that you don't want to use in your application.

{'vue/no-restricted-html-elements': ['error', 'marquee', 'button'] }

<template>
  <!-- GOOD -->
  <p></p>
  <input />
  <br />

  <!-- BAD -->
  <button></button>
  <marquee></marquee>
</template>

Options

This rule takes a list of strings, where each string is an HTML element name to be restricted:

{
  "vue/no-restricted-html-elements": ["error", "button", "marquee"]
}

{'vue/no-restricted-html-elements': ['error', 'button', 'marquee']}

<template>
  <!-- BAD -->
  <button></button>
  <marquee></marquee>
</template>

Alternatively, the rule also accepts objects.

{
  "vue/no-restricted-html-elements": [
    "error",
    {
      "element": "button",
      "message": "Prefer use of our custom <AppButton /> component"
    },
    {
      "element": "marquee",
      "message": "Do not use deprecated HTML tags"
    }
  ]
}

The following properties can be specified for the object.

• element ... Specify the html element.
• message ... Specify an optional custom message.

{ "element": "marquee" }, { "element": "button" }

{'vue/no-restricted-html-elements': ['error', { element: 'marquee' }, { element: 'button' }]}

<template>
  <!-- BAD -->
  <marquee></marquee>
  <button></button>
</template>