question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Composition API: rendered instead of a child component

See original GitHub issue

EDIT: This seems to be Composition API related. The button does not get rendered because I use <component :is="componentType"> and componentType is coming from setup() which does not get called. In vue-test-utils I could pass localVue that would have Vue.use(Composition). Is there a way for this here?

I’m rendering a component that has several child components. My buttons could not be found. At first I thought it’s a shallow render by default but that’s not the case.

<ProfileImage> gets rendered without a problem <FileUpload> too

But instead of <Button>s I’m seeing <!----> in the html output.

Is this because it’s a one word component that also shares name with an HTML element? Or that shouldn’t be an issue?

The tested component and also <ProfileImage> and <Button> use composition API.

Thanks!

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
afontcucommented, Apr 1, 2020

Hi Martin! We haven’t explored an integration with the Composition API or the beta of Vue 3, so I would say this is an expected issue 😃 We’ll work on that as soon as things get a bit more stable.

Thanks!

0reactions
MartinMalindacommented, Apr 1, 2020

OK! I didn’t notice any issues after Vue.use was done correctly in test setup.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Child components not rendering when referenced dynamically ...
I'm converting some components from vue 3's option API to the composition API. In this particular component I have two nested child ......
Read more >
Composition API FAQ - Vue.js
What is Composition API? #. Composition API is a set of APIs that allows us to author Vue components using imported functions instead...
Read more >
Composition vs Inheritance - React
React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components.
Read more >
Using Vue.js event emitters to modify component data
js v.3 and Composition API. This article will demonstrate how data and its state can be passed from a child component to its...
Read more >
How to Pass Props in Vue 3 with Composition API - Medium
In this article, we'll be looking at how to pass props from parent to child components in Vue 3 with Composition API. We'll...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found