noVueDeprecatedScopedSlots (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.5.12
Diagnostic Category: lint/nursery/noVueDeprecatedScopedSlots
This rule has an unsafe fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-deprecated-dollar-scopedslots-api

How to configure

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

Description

Disallow the deprecated Vue $scopedSlots API.

Vue 3 unifies normal and scoped slots under $slots. Replace $scopedSlots with $slots when migrating a component from Vue 2.

See the Vue 3 migration guide for more information.

Examples

Invalid

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

code-block.vue:4:17 lint/nursery/noVueDeprecatedScopedSlots  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The Vue $scopedSlots API is deprecated.
  
    2 │ export default {
    3 │   render() {
  > 4 │     return this.$scopedSlots.default;
      │                 ^^^^^^^^^^^^
    5 │   }
    6 │ };
  
  ℹ Vue 3 exposes all slots through $slots. See the Vue 3 migration guide for more information.
  
  ℹ 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.
  
  ℹ Unsafe fix: Replace $scopedSlots with $slots.
  
    2 2 │   export default {
    3 3 │     render() {
    4   │ - ····return·this.$scopedSlots.default;
      4 │ + ····return·this.$slots.default;
    5 5 │     }
    6 6 │   };

Valid

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