eslint-plugin-vue

Appearance

vue/slot-name-casing ​

enforce specific casing for slot names

📖 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>
Now loading...

🔧 Options ​

json
{
  "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>
Now loading...

"singleword" ​

<template> <!-- ✓ GOOD --> <slot name="foo" /> <!-- ✗ BAD --> <slot name="foo-bar" /> <slot name="fooBar" /> <slot name="foo_bar" /> <slot name="foo:bar" /> </template>
Now loading...

🚀 Version ​

This rule was introduced in eslint-plugin-vue v9.32.0

🔍 Implementation ​