noVueDeprecatedInlineTemplate (HTML)

Language HTML

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noVueDeprecatedInlineTemplate
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-inline-template

How to configure

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

Description

Disallow the inline-template attribute on Vue components.

In Vue 2, the inline-template attribute made a component use the content between its tags as its own template. Vue 3 removed this feature. The content is now passed to the component like any other content between its tags, and the component only shows it if its template has a <slot>.

Move the content into the component’s own template instead. If the parent needs to decide what is shown, pass the content through a slot.

Only the attribute written exactly as inline-template is reported. A bound value such as :inline-template="value" is an ordinary prop and is allowed.

Examples

Invalid

1
<template>
2
  <my-component inline-template>
3
    <div>{{ message }}</div>
4
  </my-component>
5
</template>

code-block.vue:2:17 lint/nursery/noVueDeprecatedInlineTemplate ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The inline-template attribute is not supported in Vue 3.
  
    1 │ <template>
  > 2 │   <my-component inline-template>
      │                 ^^^^^^^^^^^^^^^
    3 │     <div>{{ message }}</div>
    4 │   </my-component>
  
  ℹ Vue 3 no longer uses the content between the component's tags as its template. The component only shows that content if its template has a <slot>.
  
  ℹ Move the content into the component's own template, or pass it to the component through a slot.
  
  ℹ 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
  <my-component>
3
    <div>{{ message }}</div>
4
  </my-component>
5
  <my-component :inline-template="value" />
6
</template>