Subscribe on changes!

Runtime subcomponents compilation not working

avatar
Mar 2nd 2022

Version

3.2.31

Reproduction link

stackblitz.com

Steps to reproduce

  1. Create a vue v3 application with runtime compilation, some root component and a subcomponent with some specific $data
  2. Provide html for that application that uses a subcomponent and text binding inside that subcomponent's html to some of that subcomponent's data
  3. Compile the application and see it on a server (using runtime compiler)

What is expected?

subcomponent's html should be parsed and bindings should show data from that subcomponent's data

What is actually happening?

instead of subcomponent, an empty comment block is shown


After debugging Vue, I see that someone completely forgot about subcomponents and their contents in the runtime compiler, they are not handled properly at all, their render function is not provided by the compiler, but even if it would be provided, the context of the subcomponent compilation is also wrong (compiler doesn't recognize that subcomponents have their own context). This is a big issue

avatar
Mar 2nd 2022

Nothing was forgotten. this is simply not a feature. you can't define a component's template like this - that way is semantically already used to define "slot content".

In Vue 2, that was possible by adding a special "inline-template" prop or something, but that feature was officially dropped in Vue 3.

avatar
Mar 2nd 2022

So to be clear: if you want to define templates for subcomponents, you can't do that from within a parent component's template - you either provide a string template in the sub-component, or define the template in a <template> block somewhere outside of the app.

See: https://vuejs.org/api/options-rendering.html#template

avatar
Mar 3rd 2022

Thank you for the clarification, it confused me because this is how it works for the root component, too bad that there is no section in the documentation concerning peculiarities of runtime compilation. Those subcomponents I mentioned didn't use any slots and didn't have templates so I assumed that the runtime compiler would treat their inner html as the template.

avatar
Mar 3rd 2022

Those subcomponents I mentioned didn't use any slots and didn't have templates so I assumed that the runtime compiler would treat their inner html as the template.

Slot usage happens in the template of a component so "the components don't use any slots" is not something the compiler would know if the components don't have any templates of their own.