Dynamic Components with resolveComponent(variableName) results in Vue warning and not rendering the component

Environment

• Operating System: Linux
• Node Version: v16.15.0
• Nuxt Version: 3.0.0-rc.3
• Package Manager: npm@8.5.5
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

https://codesandbox.io/s/resolvecomponent-test-r98s25?file=/app.vue

Describe the bug

I try to create dynamic components. for reference I used this nuxt 3 documentation: https://v3.nuxtjs.org/guide/directory-structure/components#dynamic-components

The component name that is also the filename comes from a variable. When passing that variable into the resolveComponent function, the component doesn’t get rendered. Instead I get a vue warning:

[Vue warn]: Failed to resolve component: BaseBar If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

The expected behaviour would be that the component gets rendered correctly. When using the components name as a string directly inside the function, the component gets rendered. Only when using a variable it doesn’t.

Rendering the component should still work when passing a variable into that function. A typical use case would be that you get the components name that should get rendered from a cms / api.

Additional context

No response

Logs

No response

[bjcooper]

@davidhellmann, thanks for sharing that! It works for me, trying to do something very similar where I resolve a Vue component dynamically based on a backend response. Awesome!

[danielroe]

In that case you should register the dynamic components as global components: https://v3.nuxtjs.org/guide/directory-structure/components#dynamic-components.