slot-name-casing.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/slot-name-casing	enforce specific casing for slot names

vue/slot-name-casing

enforce specific casing for slot names

• ❗ This rule has not been released yet.

📖 Rule Details

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>

🔧 Options

{
  "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.

"kebab-case"

<template>
  <!-- ✓ GOOD -->
  <slot name="foo" />
  <slot name="foo-bar" />

  <!-- ✗ BAD -->
  <slot name="fooBar" />
  <slot name="foo_bar" />
  <slot name="foo:bar" />
</template>

"singleword"

<template>
  <!-- ✓ GOOD -->
  <slot name="foo" />

  <!-- ✗ BAD -->
  <slot name="foo-bar" />
  <slot name="fooBar" />
  <slot name="foo_bar" />
  <slot name="foo:bar" />
</template>

🔍 Implementation

• Rule source
• Test source