noVueMultipleSlotArgs (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.4
Diagnostic Category: lint/nursery/noVueMultipleSlotArgs
This rule doesn’t have a fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-multiple-slot-args

How to configure

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

Description

Disallow passing more than one argument to a Vue slot.

In a render function, this.$slots.name(...) renders the content that the parent component provides for the slot called name. When the parent writes that content in a template, it receives only the first argument as its slot props, so any other arguments are lost. Pass a single object that holds all the values instead.

Spreading an array into a slot call, as in this.$slots.default(...items), is also reported, because each item becomes a separate argument.

The rule checks calls on this.$slots, or on a const variable that holds this, inside components defined with export default { ... } in a .vue file, defineComponent(), or createApp(). It also checks calls through a variable that holds a slot, such as const item = this.$slots.item.

Examples

Invalid

1
<script>
2
export default {
3
  render() {
4
    return this.$slots.default(item, index);
5
  }
6
};
7
</script>

code-block.vue:4:38 lint/nursery/noVueMultipleSlotArgs ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This slot is called with more than one argument.
  
    2 │ export default {
    3 │   render() {
  > 4 │     return this.$slots.default(item, index);
      │                                      ^^^^^
    5 │   }
    6 │ };
  
  ℹ Slot content written in a template receives only the first argument, so the other arguments are lost.
  
  ℹ Pass a single object that holds all the values, for example this.$slots.default({ item, index }).
  
  ℹ 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
export default {
3
  render() {
4
    return this.$slots.default(...items);
5
  }
6
};
7
</script>

code-block.vue:4:32 lint/nursery/noVueMultipleSlotArgs ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This slot is called with a spread argument.
  
    2 │ export default {
    3 │   render() {
  > 4 │     return this.$slots.default(...items);
      │                                ^^^^^^^^
    5 │   }
    6 │ };
  
  ℹ Spreading passes each item as a separate argument, but slot content written in a template receives only the first one.
  
  ℹ Pass a single object that holds all the values, for example this.$slots.default({ item, index }).
  
  ℹ 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>
2
export default {
3
  render() {
4
    this.$slots.header();
5
    this.$slots.footer(item);
6
    return this.$slots.default({ item, index });
7
  }
8
};
9
</script>