prefer-separate-static-class.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/prefer-separate-static-class	require static class names in template to be in a separate `class` attribute	v8.2.0

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

🔧 Options

Nothing.

🚀 Version

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

🔍 Implementation

• Rule source
• Test source