noVueDeprecatedFunctionalTemplate (HTML)

Language HTML

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noVueDeprecatedFunctionalTemplate
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-deprecated-functional-template

How to configure

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

Description

Disallow the deprecated functional attribute on the <template> of a Vue component.

Vue 2 let you write <template functional> to turn a component into a functional component (a component without its own state). Vue 3 no longer supports this attribute, because functional components are no faster than regular components anymore. Remove the attribute and use a regular <template> instead.

See the Vue 3 migration guide for more information.

Examples

Invalid

1
<template functional>
2
  <div>{{ props.message }}</div>
3
</template>

code-block.vue:1:11 lint/nursery/noVueDeprecatedFunctionalTemplate ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The functional attribute on <template> is deprecated.
  
  > 1 │ <template functional>
      │           ^^^^^^^^^^
    2 │   <div>{{ props.message }}</div>
    3 │ </template>
  
  ℹ Vue 3 no longer supports functional templates, because functional components are no faster than regular components anymore.
  
  ℹ Remove the functional attribute and use a regular <template>.
  
  ℹ 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
  <div>{{ message }}</div>
3
</template>