JS.VUE.NO.RESTRICTED.CLASS

Restricted class in the template

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.

Copy

{
  "vue/no-restricted-class": ["error", "forbidden", "forbidden-two", "forbidden-three"]
}

{'vue/no-restricted-class': ['error', 'forbidden']}

Copy

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

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.

Copy

<template>
  <div :class="classes" />
</template>

<script>
export default {
  data() {
    return {
      classes: "forbidden"
    }
  }
}
</script>