noVueDeprecatedScopeAttribute (HTML)

Language HTML

Summary

Rule available since: v2.6.4
Diagnostic Category: lint/nursery/noVueDeprecatedScopeAttribute
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/no-deprecated-scope-attribute

How to configure

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

Description

Disallow the scope attribute on <template> elements in Vue templates.

Old versions of Vue used the scope attribute to receive the values that a component passes to its slot, also called slot props. Current versions of Vue don’t support this attribute: they ignore it, so the names it declares are never defined inside the <template>.

Use the v-slot directive, or its # shorthand, to receive slot props instead.

Examples

Invalid

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

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

  ✖ Unexpected scope attribute on a <template> element.
  
    1 │ <template>
    2 │   <ListComponent>
  > 3 │     <template scope="props">
      │               ^^^^^
    4 │       {{ props.title }}
    5 │     </template>
  
  ℹ Vue no longer supports the scope attribute, so the slot props it names are never defined.
  
  ℹ Use the v-slot directive instead, like <template v-slot="props">.
  
  ℹ 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
<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>

References

Vue scoped slots