Skip to content

Comments

feat(vue3): force camelCase for slot names#1264

Merged
ShGKme merged 1 commit intomainfrom
feat/vue3-slot-name-casing
Jan 14, 2026
Merged

feat(vue3): force camelCase for slot names#1264
ShGKme merged 1 commit intomainfrom
feat/vue3-slot-name-casing

Conversation

@ShGKme
Copy link
Contributor

@ShGKme ShGKme commented Jan 14, 2026

  • ref: 💥 Force camelCase in Vue everywhere #1219
  • camelCase in slot definition (<slot name="myName" />)
  • No changes for existing usages (<template #slot-kebab-name />)
  • Warn on libraries to avoid unintended breaking changes
  • Error on apps
<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>

@ShGKme ShGKme requested review from Antreesy and susnux January 14, 2026 12:24
@ShGKme ShGKme self-assigned this Jan 14, 2026
@ShGKme ShGKme added enhancement New feature or request 3. to review labels Jan 14, 2026
@ShGKme ShGKme changed the title feat(vue3): force camelCase for slot events feat(vue3): force camelCase for slot names Jan 14, 2026
@ShGKme ShGKme force-pushed the feat/vue3-slot-name-casing branch from b7ed454 to d68fdb8 Compare January 14, 2026 12:32
@ShGKme ShGKme linked an issue Jan 14, 2026 that may be closed by this pull request
💥 Force camelCase in Vue everywhere #1219
Closed
@ShGKme ShGKme mentioned this pull request Jan 14, 2026
Closed
@ShGKme
Copy link
Contributor Author

ShGKme commented Jan 14, 2026

Alternative - make it warn for apps as well.

susnux
susnux reviewed Jan 14, 2026
View reviewed changes
lib/configs/vue3.ts
// Also for slots
// Changing case is breaking for component users.
// For libraries it may result in a breaking change. Warn to prevent unintended breaking change.
// TODO: allow namespace:slotName format like in events
Copy link
Contributor

@susnux susnux Jan 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we ever use that?
<templace #option:selected> ?

Copy link
Contributor Author

@ShGKme ShGKme Jan 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, vue-select. I don't remember any other place but like with events it seems useful for me in highly customized components

Copy link
Contributor Author

@ShGKme ShGKme Jan 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, vue-select. I don't remember any other place but like with events it seems useful for me in highly customized components

@susnux
Copy link
Contributor

susnux commented Jan 14, 2026

Looks good just needs a rebase

@ShGKme ShGKme force-pushed the feat/vue3-slot-name-casing branch from d68fdb8 to 0cbabcc Compare January 14, 2026 16:32
@ShGKme ShGKme enabled auto-merge January 14, 2026 16:32
@ShGKme ShGKme merged commit 4d417a9 into main Jan 14, 2026
7 checks passed
@ShGKme ShGKme deleted the feat/vue3-slot-name-casing branch January 14, 2026 16:32
@susnux susnux mentioned this pull request Jan 19, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@susnux susnux susnux approved these changes

@Antreesy Antreesy Antreesy approved these changes

Assignees

@ShGKme ShGKme

Labels

3. to review enhancement New feature or request

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

💥 Force camelCase in Vue everywhere

3 participants

@ShGKme @susnux @Antreesy