no-restricted-class.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/no-restricted-class	disallow specific classes in Vue components	v7.19.0

vue/no-restricted-class

disallow specific classes in Vue components

📖 Rule Details

This rule lets you specify a list of classes that you don't want to allow in your templates.

🔧 Options

The simplest way to specify a list of forbidden classes is to pass it directly in the rule configuration.

{
  "vue/no-restricted-props": ["error", "forbidden", "forbidden-two", "forbidden-three"]
}

<template>
  <!-- ✗ BAD -->
  <div class="forbidden" />
  <div :class="{forbidden: someBoolean}" />
  <div :class="`forbidden ${someString}`" />
  <div :class="'forbidden'" />
  <div :class="'forbidden ' + someString" />
  <div :class="[someString, 'forbidden']" />
  <!-- ✗ GOOD -->
  <div class="allowed-class" />
</template>

<script>
export default {
  props: {
    someBoolean: Boolean,
    someString: String,
  }
}
</script>

::: warning Note This rule will only detect classes that are used as strings in your templates. Passing classes via variables, like below, will not be detected by this rule.

<template>
  <div :class="classes" />
</template>

<script>
export default {
  data() {
    return {
      classes: "forbidden"
    }
  }
}
</script>

:::

🚀 Version

This rule was introduced in eslint-plugin-vue v7.19.0

🔍 Implementation

• Rule source
• Test source