noVueMixin (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noVueMixin
This rule doesn’t have a fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- vue

How to configure

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

Description

Disallow the mixins option in Vue components.

A mixin is an object of component options, such as data or methods, that Vue merges into every component that lists it in mixins. Vue 3 still supports mixins, but they cause several problems:

It is hard to tell which mixin a property of the component comes from.
Two mixins, or a mixin and the component, can declare a property with the same name, and one silently replaces the other.
Mixins often depend on properties that another mixin or the component is expected to declare, without anything in the code that makes this visible.

In Vue 3, share logic between components with composables instead. A composable is a function that uses the Composition API, such as ref() and computed(), and returns the values a component needs. The component calls it and names what it gets back, so every property has a visible origin.

Examples

Invalid

1
<script>
2
import counterMixin from "./counterMixin";
3

4
export default {
5
  mixins: [counterMixin],
6
};
7
</script>

code-block.vue:5:3 lint/nursery/noVueMixin ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This component uses mixins.
  
    4 │ export default {
  > 5 │   mixins: [counterMixin],
      │   ^^^^^^^^^^^^^^^^^^^^^^
    6 │ };
    7 │ </script>
  
  ℹ Mixins hide where the properties of a component come from, and properties with the same name in different mixins silently replace each other.
  
  ℹ Move the shared logic into a composable and call it from setup() or <script setup> instead.
  
  ℹ 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
import { defineComponent } from "vue";
2
import counterMixin from "./counterMixin";
3

4
export default defineComponent({
5
  mixins: [counterMixin],
6
});

code-block.js:5:3 lint/nursery/noVueMixin ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This component uses mixins.
  
    4 │ export default defineComponent({
  > 5 │   mixins: [counterMixin],
      │   ^^^^^^^^^^^^^^^^^^^^^^
    6 │ });
    7 │ 
  
  ℹ Mixins hide where the properties of a component come from, and properties with the same name in different mixins silently replace each other.
  
  ℹ Move the shared logic into a composable and call it from setup() or <script setup> instead.
  
  ℹ 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 { useCounter } from "./useCounter";
3

4
const { count, increment } = useCounter();
5
</script>