useVueSlotsAsFunctions (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/useVueSlotsAsFunctions
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/require-slots-as-functions

How to configure

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

Description

Require the slots in this.$slots to be called as functions.

In Vue 3, each property of $slots is a function that returns the content of the slot. Code that treats a slot as the content itself, for example by reading its length, calling array methods on it, or spreading it into an array, doesn’t work. Call the slot to get its content instead.

See the Vue documentation for more information.

Examples

Invalid

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

4
export default {
5
  render() {
6
    return h("div", this.$slots.default.filter(isVisible));
7
  }
8
};
9
</script>

code-block.vue:6:33 lint/nursery/useVueSlotsAsFunctions ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This slot is used as its content instead of being called.
  
    4 │ export default {
    5 │   render() {
  > 6 │     return h("div", this.$slots.default.filter(isVisible));
      │                                 ^^^^^^^
    7 │   }
    8 │ };
  
  ℹ In Vue 3, each property of $slots is a function that returns the content of the slot, so reading or iterating it directly doesn't work.
  
  ℹ Call the slot to get its content, for example this.$slots.default().
  
  ℹ 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 { h } from "vue";
3

4
export default {
5
  render() {
6
    return h("div", [...this.$slots.default]);
7
  }
8
};
9
</script>

code-block.vue:6:37 lint/nursery/useVueSlotsAsFunctions ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This slot is used as its content instead of being called.
  
    4 │ export default {
    5 │   render() {
  > 6 │     return h("div", [...this.$slots.default]);
      │                                     ^^^^^^^
    7 │   }
    8 │ };
  
  ℹ In Vue 3, each property of $slots is a function that returns the content of the slot, so reading or iterating it directly doesn't work.
  
  ℹ Call the slot to get its content, for example this.$slots.default().
  
  ℹ 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 { h } from "vue";
3

4
export default {
5
  render() {
6
    const children = this.$slots.default;
7
    return h("div", children.length);
8
  }
9
};
10
</script>

code-block.vue:6:34 lint/nursery/useVueSlotsAsFunctions ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This slot is used as its content instead of being called.
  
    4 │ export default {
    5 │   render() {
  > 6 │     const children = this.$slots.default;
      │                                  ^^^^^^^
    7 │     return h("div", children.length);
    8 │   }
  
  ℹ In Vue 3, each property of $slots is a function that returns the content of the slot, so reading or iterating it directly doesn't work.
  
  ℹ Call the slot to get its content, for example this.$slots.default().
  
  ℹ 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
import { h } from "vue";
3

4
export default {
5
  render() {
6
    const children = this.$slots.default();
7
    const header = this.$slots.header && this.$slots.header();
8
    return h("div", [header, children]);
9
  }
10
};
11
</script>