pageClass | sidebarDepth | title | description | since |
---|---|---|---|---|
rule-details |
0 |
vue/slot-name-casing |
enforce specific casing for slot names |
v9.32.0 |
enforce specific casing for slot names
This rule enforces proper casing of slot names in Vue components.
<template>
<!-- ✓ GOOD -->
<slot name="foo" />
<slot name="fooBar" />
<!-- ✗ BAD -->
<slot name="foo-bar" />
<slot name="foo_bar" />
<slot name="foo:bar" />
</template>
{
"vue/slot-name-casing": ["error", "camelCase" | "kebab-case" | "singleword"]
}
"camelCase"
(default) ... Enforce slot name to be in camel case."kebab-case"
... Enforce slot name to be in kebab case."singleword"
... Enforce slot name to be a single word.
<template>
<!-- ✓ GOOD -->
<slot name="foo" />
<slot name="foo-bar" />
<!-- ✗ BAD -->
<slot name="fooBar" />
<slot name="foo_bar" />
<slot name="foo:bar" />
</template>
<template>
<!-- ✓ GOOD -->
<slot name="foo" />
<!-- ✗ BAD -->
<slot name="foo-bar" />
<slot name="fooBar" />
<slot name="foo_bar" />
<slot name="foo:bar" />
</template>
This rule was introduced in eslint-plugin-vue v9.32.0