docs Styleguide recommends to use kebab-case for custom events, but Vue emits camelCase `update:modelValue` under the hood

Hello! I have met two statements in the docs and I can't understand them.

Styleguide, where we see the recommendation to use kebab-case for emited events: https://v3.vuejs.org/guide/component-custom-events.html#event-names
Migration strategy, where we see that Vue emits update:modelValue by default which is in camelCase. Can you please tell, why did you decide to use camelCase in the v-model strategy and at the same time recommend using kebab-case? https://v3.vuejs.org/guide/migration/v-model.html#migration-strategy

Sep 20 '21 10:09 Oleksii14

@Oleksii14 the recommendation only applies to in-DOM templates, not to the common case when you use a string template or SFC. Does this resolve your concern?

Oct 16 '21 10:10 NataliaTepluhina

Can you provide an example of the "in-DOM" teamplate? And if possible, can you also add a docs link to a section of in-DOM templates?

Oct 18 '21 04:10 Oleksii14

I think what @NataliaTepluhina is trying to say about in DOM template is this.

<body>
  <div id="app">
    <my-component />
  </div>

  <template id="template-for-my-component">
    {{ message }}
  </template>
</body>

Oct 18 '21 21:10 dammy001

Thanks, I understood. But what about your general recommendation to use kebab case everywhere in templates (because it is more natural for HTML) and camel case in JS code?

Oct 19 '21 05:10 Oleksii14

@Oleksii14 it might be a good point to add 👍🏻

Oct 19 '21 13:10 NataliaTepluhina

I've noticed inconsistency / ambiguity in the casing recommendations as well:

Examples in the docs use camelCase for props and events (example).

Prop name casing section in the style guide doesn't make it clear enough that this recommendation is only for in-DOM templates and that it's recommended to use camelCase in SFC. Actually, it seems to recommend kebab-case for all templates and even JSX:

Prop names should always use camelCase during declaration, but kebab-case in templates and JSX.

Also, the doc only mentions prop casing, but not about event casing.

From my experience, real projects use the kebab-case recommendation even when using SFC, especially since most projects would use eslint plugin:vue/recommended which considers camelCase prop usage in SFC templates invalid. This looks unnatural for SFC templates, especially when examples from the official docs also use camelCase.

Feb 21 '22 13:02 yk1711