no-restricted-class.md

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

vue/no-restricted-classes

disallow specific classes

📖 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", { classes: ["forbidden"] }]
}

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

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

Alternatively, you can also specify a list of files that contain forbidden classes. Each file must contain a JSON-formatted array of strings.

{
  "vue/no-restricted-props": ["error",
    {
      files: [".eslint/forbidden-classes.json"]
    },
  ]
}

.eslint/forbidden-classes.json:

[
  "forbidden-class",
  "another-forbidden-class"
]

::: 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