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)/"]
}

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