Skip to content

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.

json
{
  "vue/no-restricted-class": ["error", "forbidden", "forbidden-two", "forbidden-three", "/^for(bidden|gotten)/"]
}
Now loading...

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.

vue
<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 ​