useVueConsistentVSlotStyle (HTML)
Language HTML
Summary
Section titled “Summary”- Rule available since:
v2.6.5 - Diagnostic Category:
lint/nursery/useVueConsistentVSlotStyle - This rule has a safe fix.
- The default severity of this rule is information.
- This rule belongs to the following domains:
- Sources:
- Same as
vue/v-slot-style
- Same as
How to configure
Section titled “How to configure”{ "linter": { "rules": { "nursery": { "useVueConsistentVSlotStyle": "error" } } }}Description
Section titled “Description”Enforce a consistent style for v-slot in Vue templates.
Vue lets you write the same slot in three ways:
- the shorthand
#, as in#header; - the longhand
v-slot:, as inv-slot:header; v-slotwithout a slot name, which only works for the default slot.
Mixing these styles makes templates harder to read. This rule reports slots that don’t use the configured style.
By default, the rule expects:
v-slotfor the default slot when it’s placed directly on a component, as in<MyComponent v-slot="props">;#defaultfor the default slot on a<template>element;#namefor named slots.
Examples
Section titled “Examples”Invalid
Section titled “Invalid”<template> <MyComponent #default="data">{{ data }}</MyComponent></template>code-block.vue:2:16 lint/nursery/useVueConsistentVSlotStyle FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This slot should be written as v-slot.
1 │ <template>
> 2 │ <MyComponent #default="data">{{ data }}</MyComponent>
│ ^^^^^^^^
3 │ </template>
4 │
ℹ This project writes every slot the same way, so that templates are easier to read.
ℹ 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.
ℹ Safe fix: Write it as v-slot.
1 1 │ <template>
2 │ - ··<MyComponent·#default="data">{{·data·}}</MyComponent>
2 │ + ··<MyComponent·v-slot="data">{{·data·}}</MyComponent>
3 3 │ </template>
4 4 │
<template> <MyComponent> <template v-slot>content</template> </MyComponent></template>code-block.vue:3:15 lint/nursery/useVueConsistentVSlotStyle FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This slot should be written as #default.
1 │ <template>
2 │ <MyComponent>
> 3 │ <template v-slot>content</template>
│ ^^^^^^
4 │ </MyComponent>
5 │ </template>
ℹ This project writes every slot the same way, so that templates are easier to read.
ℹ 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.
ℹ Safe fix: Write it as #default.
1 1 │ <template>
2 2 │ <MyComponent>
3 │ - ····<template·v-slot>content</template>
3 │ + ····<template·#default>content</template>
4 4 │ </MyComponent>
5 5 │ </template>
<template> <MyComponent> <template v-slot:header>content</template> </MyComponent></template>code-block.vue:3:15 lint/nursery/useVueConsistentVSlotStyle FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This slot should be written as #header.
1 │ <template>
2 │ <MyComponent>
> 3 │ <template v-slot:header>content</template>
│ ^^^^^^^^^^^^^
4 │ </MyComponent>
5 │ </template>
ℹ This project writes every slot the same way, so that templates are easier to read.
ℹ 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.
ℹ Safe fix: Write it as #header.
1 1 │ <template>
2 2 │ <MyComponent>
3 │ - ····<template·v-slot:header>content</template>
3 │ + ····<template·#header>content</template>
4 4 │ </MyComponent>
5 5 │ </template>
<template> <MyComponent v-slot="data">{{ data }}</MyComponent> <MyComponent> <template #default>content</template> <template #header>content</template> </MyComponent></template>Options
Section titled “Options”The atComponent and default options accept "shorthand", "longhand", or
"v-slot". The named option accepts "shorthand" or "longhand", because a named
slot always needs its name.
"shorthand": write#, as in#defaultor#header."longhand": writev-slot:, as inv-slot:defaultorv-slot:header."v-slot": writev-slotwithout a slot name.
atComponent
Section titled “atComponent”Default: "v-slot"
The style for the default slot when v-slot is placed directly on a component, as in
<MyComponent v-slot="data">.
{ "linter": { "rules": { "nursery": { "useVueConsistentVSlotStyle": { "level": "on", "options": { "atComponent": "shorthand" } } } } }}Invalid
Section titled “Invalid”<template> <MyComponent v-slot="data">{{ data }}</MyComponent></template>code-block.vue:2:16 lint/nursery/useVueConsistentVSlotStyle FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This slot should be written as #default.
1 │ <template>
> 2 │ <MyComponent v-slot="data">{{ data }}</MyComponent>
│ ^^^^^^
3 │ </template>
4 │
ℹ This project writes every slot the same way, so that templates are easier to read.
ℹ 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.
ℹ Safe fix: Write it as #default.
1 1 │ <template>
2 │ - ··<MyComponent·v-slot="data">{{·data·}}</MyComponent>
2 │ + ··<MyComponent·#default="data">{{·data·}}</MyComponent>
3 3 │ </template>
4 4 │
<template> <MyComponent #default="data">{{ data }}</MyComponent></template>default
Section titled “default”Default: "shorthand"
The style for the default slot on a <template> element, as in
<template #default>.
{ "linter": { "rules": { "nursery": { "useVueConsistentVSlotStyle": { "level": "on", "options": { "default": "v-slot" } } } } }}Invalid
Section titled “Invalid”<template> <MyComponent> <template #default>content</template> </MyComponent></template>code-block.vue:3:15 lint/nursery/useVueConsistentVSlotStyle FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This slot should be written as v-slot.
1 │ <template>
2 │ <MyComponent>
> 3 │ <template #default>content</template>
│ ^^^^^^^^
4 │ </MyComponent>
5 │ </template>
ℹ This project writes every slot the same way, so that templates are easier to read.
ℹ 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.
ℹ Safe fix: Write it as v-slot.
1 1 │ <template>
2 2 │ <MyComponent>
3 │ - ····<template·#default>content</template>
3 │ + ····<template·v-slot>content</template>
4 4 │ </MyComponent>
5 5 │ </template>
<template> <MyComponent> <template v-slot>content</template> </MyComponent></template>Default: "shorthand"
The style for named slots, as in <template #header>. A slot with a dynamic name,
such as #[name], is a named slot.
{ "linter": { "rules": { "nursery": { "useVueConsistentVSlotStyle": { "level": "on", "options": { "named": "longhand" } } } } }}Invalid
Section titled “Invalid”<template> <MyComponent> <template #header>content</template> </MyComponent></template>code-block.vue:3:15 lint/nursery/useVueConsistentVSlotStyle FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This slot should be written as v-slot:header.
1 │ <template>
2 │ <MyComponent>
> 3 │ <template #header>content</template>
│ ^^^^^^^
4 │ </MyComponent>
5 │ </template>
ℹ This project writes every slot the same way, so that templates are easier to read.
ℹ 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.
ℹ Safe fix: Write it as v-slot:header.
1 1 │ <template>
2 2 │ <MyComponent>
3 │ - ····<template·#header>content</template>
3 │ + ····<template·v-slot:header>content</template>
4 4 │ </MyComponent>
5 5 │ </template>
<template> <MyComponent> <template v-slot:header>content</template> </MyComponent></template>References
Section titled “References”Related links
Section titled “Related links”Sponsored by
Copyright (c) 2023-present Biome Developers and Contributors.