useVueOneComponentPerFile (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/useVueOneComponentPerFile
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Inspired from vue/one-component-per-file

How to configure

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

Description

Enforce that each file defines at most one Vue component.

When every component lives in its own file, components are easier to find, and each file stays small enough to read and change on its own.

The rule counts every component that a file defines:

a <script setup> block;
export default { ... } in a .vue file;
defineComponent() called with an options object or a setup function;
createApp() called with an options object.

A component that is only imported, as in createApp(App), isn’t counted. The default export of a plain <script> block that sits next to a <script setup> block is part of the same component, so it isn’t counted either.

When a file defines more than one component, the rule reports each of them, except the main component of a .vue file.

Examples

Invalid

1
<script setup>
2
import { defineComponent, h } from "vue";
3

4
const Badge = defineComponent({
5
  render: () => h("span", "New"),
6
});
7
</script>

code-block.vue:4:15 lint/nursery/useVueOneComponentPerFile ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This file defines more than one component.
  
    2 │ import { defineComponent, h } from "vue";
    3 │ 
  > 4 │ const Badge = defineComponent({
      │               ^^^^^^^^^^^^^^^^^
  > 5 │   render: () => h("span", "New"),
  > 6 │ });
      │ ^^
    7 │ </script>
    8 │ 
  
  ℹ Components that share a file are harder to find, and the file grows harder to read and change.
  
  ℹ Move this component to its own file.
  
  ℹ 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
<script>
2
import { defineComponent } from "vue";
3

4
const TodoItem = defineComponent({
5
  props: ["title"],
6
});
7

8
export default {
9
  components: { TodoItem },
10
};
11
</script>

code-block.vue:4:18 lint/nursery/useVueOneComponentPerFile ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This file defines more than one component.
  
    2 │ import { defineComponent } from "vue";
    3 │ 
  > 4 │ const TodoItem = defineComponent({
      │                  ^^^^^^^^^^^^^^^^^
  > 5 │   props: ["title"],
  > 6 │ });
      │ ^^
    7 │ 
    8 │ export default {
  
  ℹ Components that share a file are harder to find, and the file grows harder to read and change.
  
  ℹ Move this component to its own file.
  
  ℹ 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
<script setup>
2
import Badge from "./Badge.vue";
3
</script>

1
import { createApp } from "vue";
2
import App from "./App.vue";
3

4
createApp(App).mount("#app");

Resources

Vue style guide: component files