Components with CamelCaseName can not be nested, whereas snake-case-names are fine

[sradomski]

Hi there,

We are using the template-based approach with ipyvue/ipyvuetify to decouple frontend development from the backend via .vue files. Our interface consists of nested components as I imagine any non-trivial UI would. In order to resolve these nested components, we register their tag-names and .vue file content at the VueComponentRegistry.vue_component_registry using vue.register_component_from_string.

It turns out, that if you register component tags as CamelCase, they cannot be nested, whereas it is completely fine to use snake-case. An minimal example jupyter notebook is attached.

Is this an oversight, intentional or is there some documentation that we missed? I know that I spent quite some time debugging the UI structure until I realized that the issue is the capitalization of the component's tagnames.

Thank you for an awesome project! Stefan

Nested CamelCase Component Issue.ipynb.zip

[mariobuikhuizen]

I didn't know of this issue, but looking into it, I found that CamelCase names are not compatible with https://github.com/FranckFreiburger/http-vue-loader, which is used to parse the component-templates.

The DOM version of vue template handling is used by http-vue-loader and the documentation states: https://vuejs.org/v2/guide/components-registration.html#With-PascalCase "Note, however, that only kebab-case names are valid directly in the DOM (i.e. non-string templates)."

So CamelCase names work in a widget-template, but sadly not in a component-template.