# vue/prefer-separate-static-class

require static class names in template to be in a separate class attribute

🔧 The --fix option on the command line (opens new window) can automatically fix some of the problems reported by this rule.

# 📖 Rule Details

This rule reports static class names in dynamic class attributes.

<template>
  <!-- ✗ BAD -->
  <div :class="'static-class'" />
  <div :class="{'static-class': true, 'dynamic-class': foo}" />
  <div :class="['static-class', dynamicClass]" />

  <!-- ✓ GOOD -->
  <div class="static-class" />
  <div class="static-class" :class="{'dynamic-class': foo}" />
  <div class="static-class" :class="[dynamicClass]" />
</template>

Now loading...

# 🔧 Options

Nothing.

# 🚀 Version

This rule was introduced in eslint-plugin-vue v8.2.0

# 🔍 Implementation

Rule source (opens new window)
Test source (opens new window)

← vue/prefer-prop-type-boolean-first vue/prefer-true-attribute-shorthand →