CODEWITHSUNDEEP
vue.js
Gutek
Gutek

Reputation: 107

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?

Upvotes: 1

Views: 425

Answers (2)

Dawid
Dawid

Reputation: 1

Based on this mechanism I've just prepared even more automatic version with localStorage powered by pinia and a wrapper component switching all of its instances at once. Also with full typescript support. Maybe this could help. Feel free to comment :)

https://github.com/Nagell/dynamic_loading_components

Upvotes: 0

Estus Flask
Estus Flask

Reputation: 222484

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.

Upvotes: 1

Related Questions