useVueSeparateStaticClass (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/useVueSeparateStaticClass
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/prefer-separate-static-class

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useVueSeparateStaticClass": "error"
6
      }
7
    }
8
  }
9
}

Description

Require static class names to be in a separate class attribute.

In Vue, the :class binding (also written v-bind:class) is for classes that are computed while the app runs, such as a class that is only added when a condition is true. A class name that never changes doesn’t need a binding: putting it in the plain class attribute keeps the classes that always apply apart from the ones that change, and makes the template easier to read.

Vue merges the class attribute and the :class binding, so an element can use both.

This rule reports class names in a :class binding that always apply:

a string, such as :class="'header'";
a string in an array, such as :class="['header', theme]";
an object key whose value is true, such as :class="{ header: true }";
a part of a template literal that is separated by spaces from every ${} placeholder, such as header in :class="`header ${theme}`".

Examples

Invalid

1
<template>
2
  <div :class="'header'"></div>
3
</template>

code-block.vue:2:16 lint/nursery/useVueSeparateStaticClass ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The static class header is in a :class binding.
  
    1 │ <template>
  > 2 │   <div :class="'header'"></div>
      │                ^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Classes that always apply don't need a binding. Mixing them with the classes that change makes the template harder to read.
  
  ℹ Move the static classes to the class attribute of the element.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<template>
2
  <div :class="['header', theme]"></div>
3
</template>

code-block.vue:2:17 lint/nursery/useVueSeparateStaticClass ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The static class header is in a :class binding.
  
    1 │ <template>
  > 2 │   <div :class="['header', theme]"></div>
      │                 ^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Classes that always apply don't need a binding. Mixing them with the classes that change makes the template harder to read.
  
  ℹ Move the static classes to the class attribute of the element.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<template>
2
  <div :class="{ header: true, active: isActive }"></div>
3
</template>

code-block.vue:2:18 lint/nursery/useVueSeparateStaticClass ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The static class header is in a :class binding.
  
    1 │ <template>
  > 2 │   <div :class="{ header: true, active: isActive }"></div>
      │                  ^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Classes that always apply don't need a binding. Mixing them with the classes that change makes the template harder to read.
  
  ℹ Move the static classes to the class attribute of the element.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<template>
2
  <div :class="`header ${theme}`"></div>
3
</template>

code-block.vue:2:17 lint/nursery/useVueSeparateStaticClass ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The static class header is in a :class binding.
  
    1 │ <template>
  > 2 │   <div :class="`header ${theme}`"></div>
      │                 ^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Classes that always apply don't need a binding. Mixing them with the classes that change makes the template harder to read.
  
  ℹ Move the static classes to the class attribute of the element.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<template>
2
  <div class="header"></div>
3
  <div class="header" :class="theme"></div>
4
  <div class="header" :class="{ active: isActive }"></div>
5
  <div :class="`header-${theme}`"></div>
6
</template>