Proposal

• ✅ vue/component-definition-name-casing: [2, 'PascalCase'] (default, used via vue/strongly-recommended)
• ✅ vue/component-name-in-template-casing: [2, 'PascalCase] (default, used manually)
• ➕ vue/component-options-name-casing: [2, 'PascalCase', { registeredComponentsOnly: true }] (add rule, used de-facto)
  • feat(vue): add vue/component-options-name-casing with PascalCase #1261
• ✅ vue/prop-name-casing: [2, 'camelCase'] (default, used via vue/strongly-recommended)
• ➕ vue/custom-event-name-casing: [2, 'camelCase'] (add rule, default and used de-facto)
  • feat(vue3): force camelCase for events in <script> #1262
• 💥 vue/v-on-event-hyphenation: [2, 'camelCase'] (opposite, change)
  • feat(vue3): force camelCase for events in <template> #1263
• 💥 vue/attribute-hyphenation: [2, 'never'] (opposite, change)
  • feat(vue3): force camelCase for props in template #1266
• ➕ vue/slot-name-casing: [2, 'camelCase'] (default, add rule)
  • feat(vue3): force camelCase for slot names #1264

Motivation

1. Having different cases in template and script makes it harder to find prop usage with a simple search
2. Different tooling handle kebab-case worse, for example, with the new v-bind shortcut syntax <Tag :foo-bar /> from fooBar property, with refactoring and etc.
3. After introducing slot-name-casing, attributes are the only with kebab-case as the default recommendation (but not forced)

Isn't it against Vue Style Guide?

Not really, now both styles are correct if consistent: https://vuejs.org/style-guide/rules-strongly-recommended.html#prop-name-casing

In addition, the Vue Style Guide is:

• Not permanent: just recently <kebab-case> was the recommended default to component names in the template
• Not consistent: PascalCase/camelCase for components, event, slots and kebab for props
• Sometimes slow to adapt: before supporting in-dom templates was more important than nowadays, Vue 3 Style Guide was in active development for a long time after the Vue 3 release

Detailed

Existing rules

• vue/component-definition-name-casing: [2, 'PascalCase'] (✅ default, used via vue/strongly-recommended)
• vue/component-name-in-template-casing: [2, 'PascalCase] (✅ default, used manually)
• vue/prop-name-casing: [2, 'camelCase'] (✅ default, used via vue/strongly-recommended)

<script>
import NcComponent from './NcComponent.vue'

export default {
	name: 'MyApp', // ✅ Good
	name: 'my-app', // ❌ Bad

	components: {
		NcComponent,
	},

	props: {
		componentProp: { // ✅ Good
			type: Number,
			required: true,
		},

		'component-prop': { // ❌ Bad
			type: Number,
			required: true,
		},
	},
}
</script>

<template>
	<NcComponent /> <!-- ✅ Good -->
	<nc-component /> <!-- ❌ Bad -->
</template>

Add rules for what we have de-facto

• vue/custom-event-name-casing: [2, 'camelCase']
• vue/component-options-name-casing: [2, 'PascalCase', { registeredComponentsOnly: true }]

<script>
import NcComponent from './NcComponent.vue'

export default {
	name: 'MyApp',

	components: {
		NcComponent, // ✅ Good
		'nc-component': NcComponent, // ❌ Bad
	},

	emits: [
		'componentEvent',
		'component-event',
	],
}
</script>

<template>
	<button @click="$emit('componentEvent')" /> <!-- ✅ Good -->
	<button @click="$emit('component-event')" /> <!-- ❌ Bad -->
</template>

Change events in template from 'kebab-case' to 'camelCase'

• vue/v-on-event-hyphenation: [2, 'camelCase'] (💥 opposite, change)

<template>
	<!-- ✅ Good -->
	<MyComponent @customEvent="handleEvent" />
	<!-- ✅ Also fine -->
	<MyComponent @namespace:customEvent="handleEvent" />

	!-- ❌ Bad -->
	<MyComponent @custom-event="handleEvent" />
</template>

Change attrs/props in template from 'kebab-case' to 'camelCase'

• vue/attribute-hyphenation: [2, 'never'] (💥 opposite, change)

<script setup>
const myShortcut = 'value'
</script>

<template>
	<!-- ✅ Good -->
	<MyComponent myProp="value" :myShortcut myBoolean />
	<!-- ✅ Also fine -->
	<MyComponent aria-label="label" data-attr="value" />

	!-- ❌ Bad -->
	<MyComponent my-prop="value" :my-shortcut my-boolean />
</template>

Add rule for slot definition

• vue/slot-name-casing: [2, 'camelCase'] (➕ default, add the rule)

<script setup lang="ts">
import type { Slot } from 'vue'

defineSlots<{
	mySlot: Slot // ✅ Good 
	'my-slot': Slot // ❌ Bad
}>()
</script>

<template>
	<!-- ✅ Good -->
	<slot name="mySlot" />

	!-- ❌ Bad -->
	<slot name="my-slot" />
</template>