Subscribe on changes!

Inconsistencies in template for components returned from setup

avatar
Dec 4th 2020

Version

3.0.4

Reproduction link

https://codepen.io/sibbngheid/pen/mdrVzwE

Steps to reproduce

.

What is expected?

I didnt use <component> too often. That because I don't know which ones are actually valid usage or not. And probably nesting component under an object not a valid usage in Vue. But at least I was expecting 3.1, 3.2 and 4.2 to be rendered properly.

What is actually happening?

They are not rendered.

avatar
Dec 4th 2020

First, you need to understand Vue template is not JSX. By default components are resolved at runtime using their tag names from a registry (the components option) instead of compiled into JavaScript expressions.

Directly using imported components is strictly a feature of <script setup>. Returning the component from setup is only an implementation detail which you should not rely on in manual code, since it relies on compile-time hints for the template compiler to prioritize setup return values.

Without the <script setup> hints it only means you are exposing it as a JavaScript value (which is only available in expressions, which is why it only works with :is bindings)

In short: If you are not using <script setup>, always register components under the components option instead unless you want to use it in JS expressions.