noVueDeprecatedSlotScope (HTML)

Language HTML

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noVueDeprecatedSlotScope
This rule has an unsafe fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-deprecated-slot-scope-attribute

How to configure

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

Description

Disallow the deprecated slot-scope attribute in Vue templates.

Vue 2.6 replaced slot-scope with the v-slot directive, and Vue 3 removed slot-scope. In Vue 3, the variables that slot-scope declares are never set, so the slot content can’t read the values the component passes to it.

Use v-slot on a <template> element inside the component instead. You can also write v-slot as #, for example #default="props".

The fix replaces slot-scope with v-slot when the result is valid. If slot-scope is on an element other than <template>, the fix wraps that element in a <template v-slot>. There is no fix when the element also has a slot attribute or a v-for directive, or when the component has other content for its default slot.

Examples

Invalid

1
<template>
2
  <ListComponent>
3
    <template slot-scope="props">
4
      {{ props.title }}
5
    </template>
6
  </ListComponent>
7
</template>

code-block.vue:3:15 lint/nursery/noVueDeprecatedSlotScope  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The slot-scope attribute is deprecated.
  
    1 │ <template>
    2 │   <ListComponent>
  > 3 │     <template slot-scope="props">
      │               ^^^^^^^^^^^^^^^^^^
    4 │       {{ props.title }}
    5 │     </template>
  
  ℹ Vue 3 doesn't support slot-scope, so the variables it declares are never set.
  
  ℹ Use the v-slot directive on a <template> element 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.
  
  ℹ Unsafe fix: Replace slot-scope with v-slot.
  
    1 1 │   <template>
    2 2 │     <ListComponent>
    3   │ - ····<template·slot-scope="props">
      3 │ + ····<template·v-slot="props">
    4 4 │         {{ props.title }}
    5 5 │       </template>

1
<template>
2
  <ListComponent>
3
    <span slot-scope="props">{{ props.title }}</span>
4
  </ListComponent>
5
</template>

code-block.vue:3:11 lint/nursery/noVueDeprecatedSlotScope  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The slot-scope attribute is deprecated.
  
    1 │ <template>
    2 │   <ListComponent>
  > 3 │     <span slot-scope="props">{{ props.title }}</span>
      │           ^^^^^^^^^^^^^^^^^^
    4 │   </ListComponent>
    5 │ </template>
  
  ℹ Vue 3 doesn't support slot-scope, so the variables it declares are never set.
  
  ℹ Use the v-slot directive on a <template> element 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.
  
  ℹ Unsafe fix: Wrap the element in a <template> with v-slot.
  
    1 1 │   <template>
    2 2 │     <ListComponent>
    3   │ - ····<span·slot-scope="props">{{·props.title·}}</span>
      3 │ + ····<template·v-slot="props"><span>{{·props.title·}}</span></template>
    4 4 │     </ListComponent>
    5 5 │   </template>

Valid

1
<template>
2
  <ListComponent>
3
    <template v-slot="props">
4
      {{ props.title }}
5
    </template>
6
  </ListComponent>
7
  <ListComponent>
8
    <template #item="{ title }">
9
      {{ title }}
10
    </template>
11
  </ListComponent>
12
</template>