# 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-class": ["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>
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