search

vuejs / docs

📄 Documentation for Vue 3
https://vuejs.org
Other
2.94k stars 4.47k forks source link

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

Open Oleksii14 opened 3 years ago

Oleksii14 commented 3 years ago

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

  1. Styleguide, where we see the recommendation to use kebab-case for emited events: https://v3.vuejs.org/guide/component-custom-events.html#event-names
  2. 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
NataliaTepluhina commented 3 years ago

@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?

Oleksii14 commented 3 years ago

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?

dammy001 commented 3 years ago

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>
Oleksii14 commented 3 years ago

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?

NataliaTepluhina commented 3 years ago

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

yk1711 commented 2 years ago

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.