vue.js

Binding a Dynamic components

I am using Vue in version 2.7 with Composition API and i`m struggling with one thing. I want to dynamicly render a component, based on a reactive value. Here is the code:

const renderTab = ref('admin');
// and later in template
<component :is="renderTab"></component>

Problem is that i`m getting error:

Unknown custom element: <admin>

I am printing the value of {{ renderTab }} and its correct. Very confusing fact for me is that i can without a problem call this component like this:

<admin></admin> or like this:

<component :is="'admin'"></component> or even like this:

<component is="admin"></component>

What am i missing or doing wrong guys?

Solution

  • A component needs to be resolved before it's used as dynamic component. For globally registered component it can be:

    const Admin = resolveComponent('Admin')
const renderTab = ref(Admin);

    For local component it's more straightforward to import and use Admin directly.