Vue-next: Recursive components support

[danyadev]

Version

3.0.0-beta.12

Reproduction

https://jsfiddle.net/posva/g04vta1f/

Steps to reproduce

1. Run fiddle
2. check console

What is expected?

Сomponents are rendered.

What is actually happening?

Warn in console: Failed to resolve component: Foo

---

The problem is reproduced if you use import Foo from './Foo.vue';

If you try the example from edge cases for vue 2, then another error will occur: Invalid VNode type: undefined (undefined).

// Foo.vue
<script>
export default {
  components: {
    Bar: () => import('./Bar.vue')
  }
};
</script>

[posva]

Updated to add a reproduction. Hopefully, you will use that fiddle to create a reproduction in the future 🙂

[LinusBorg]

components: { 
  Bar: () => Promise.resolve(Bar)
},

This is not a valid component definition. async components need to be wrapped with defineAsyncComponent() in Vue 3.

components: { 
  Bar: defineAsyncComponent(() => Promise.resolve(Bar))
},

Updated, working Fiddle: https://jsfiddle.net/9x2owt7m/

[danyadev]

Oh, using import makes the component load separately, and this is noticeable when the component is first rendered, but I don’t need it

[danyadev]

In vue 2.x, I globally registered recursive components, but on version 3.x I do not know how to do this

[posva]

You can do

let app = createApp(App)
app.component('Recursive', Recursive)

[danyadev]

Thanks!