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