Style Guide Feedback: Prop name casing

[paulshen]

Hi!

I'd like to share some feedback on prop name casing. I understand the motivation (following language convention). The downside to this approach is that static analysis does not (at least currently) map camelcase <-> kebab-case.

For example, TypeScript will complain in the following example that the prop myNumber is not provided.

const MyComponent = {
  props: {
    myNumber: {
      type: Number,
      required: true
    }
  }
};

// JSX
<MyComponent my-number={3} />

When using Vue with TypeScript, I personally would use camelCase prop naming, especially with JSX which I consider more JavaScript than HTML (subjective). Maybe it's worth adding a note about TypeScript? Thanks for reading!

[vutran6853]

I like add to the discussion. This statement but kebab-case in templates and JSX was under Vue 2 useage which is true. But in Vue 3 this will work work now still but in templates but not in JSX/TSX. In JSX/TSX it will throw error if it kebab-case.

Mybe we can add another example under Good for jsx?

props: { // js
  myNumber: String
}

<WelcomeMessage my-number="hi"/>  // html example

<WelcomeMessage myNumber="hi"/> // JSX example

[jayporta]

I prefer JSX over templates. I like Vue but I still prefer JSX, so using JSX in Vue has been really great. I've been able to use camel case in Vue 2 with JavaScript but haven't used Vue 3 with TypeScript yet. I would be glad to contribute but I have no idea where to start. I can look into it myself but if someone could point me in the right direction I could submit a PR sooner rather than later.

Unless I'm misunderstanding OP. Are camel case props not allowed in Vue 3 TypeScript JSX?

[theoephraim]

For anyone interested, check out a post in the Vue RFCs discussions and please weigh in there! Would love to see this changed...