Quasar components inside templates using PascalCase

[leopiccionia]

I've noticed that I can't use Quasar components on templates using PascalCase naming, even though it works with kebab-case.

The issue doesn't occur with my own custom components defined inside Quasar.

Software version

Quasar: 0.15

JsFiddle (for Quasar v0.15+ only)

https://jsfiddle.net/14frxq99/

What did you get as the error?

No component shown.

What were you expecting?

<QBtn></QBtn> and <q-btn></q-btn> being equivalent.

[rstoenescu]

Hi,

This is simply how Vue works. No way around it...

[leopiccionia]

Actually, a component registered in PascalCase can be used in kebab-case, but the opposite is not true (see vuejs/vue#5581). I think supporting both (i.e. registering components names in PascalCase) would be a great convenience.

If you allow me, I can prepare a PR.

[rstoenescu]

You need to understand that using UMD/standalone you're not taking advantage of vue-loader which compiles your templates into render functions and allow kebab-case/pascal-case conversions as needed. In UMD, you're simply writing HTML that the browser can understand, after which Vue parses the HTML DOM nodes and initialises it.

Can you detail what the PR is about pls?

[leopiccionia]

Actually, I first noticed the issue on the a project managed by vue-cli, not on standalone.

---

As I said previously, if a component is registered (either globally via Vue.component or locally via components) in PascalCase, it can be used inside a template in all PascalCase, camelCase and kebab-case; but, if you register it on kebab-case, it can only be used in kebab-case (see repro).

As I see here, the components are registered globally by the components name attribute, and this is kebab-case. So I basically see two ways of solving this:

1. Convert components names to PascalCase before registering.
2. Change all components name to PascalCase. This requires the change of most files, but would be more performatic.

We could benchmark to see which one is more performatic:

1. Check c.name.startsWith('q-') and then convert to PascalCase.
2. Check c.name.match(/^Q[A-Z]/).

[rstoenescu]

Interesting. Ok, will you be willing to do some tests? I'm with you 100% on this. I'm taking some time off. Just released v0.15 and I'm beat! Talk to you the following days?

[leopiccionia]

Yes, sure. But I'm busy, I'll try to prepare the PR on weekend.

[rstoenescu]

Please note that Vue docs say: When using string templates however, we’re not bound by HTML’s case-insensitive restrictions -- so it's ONLY when using string templates. JsFiddle/Codepen etc will still not work with <QBtn> for example.

[ramanan12345]

Leave now.