[Vuejs]-Dynamic components doesn't work in script setup

by

6👍

✅

Of course it does not work. Your components are not registered by name. How could Vue know that "A" should be Shop component?

You have 2 options:

  1. register components globally (app.component()) or locally (not possible with script setup – normal script must be used alongside the script setup). Now you can pass their name as String into is and Vue will know what to do

  2. Or pass a component object into :is instead of string

<template>
  <div id="dynamic-component-demo" class="demo">
    <button
      v-for="(tab, i) in tabs"
      v-bind:key="tab.name"
      v-bind:class="['tab-button', { active: currentTab.name === tab.name }]"
      v-on:click="currentTab = tabs[i]"
    >
      {{ tab.name }}
    </button>
    <component :is="currentTab.comp"></component>
  </div>
</template>
<script setup lang="ts">
import { shallowRef } from 'vue'
import Shop from './A.vue';
import Knowledge from './B.vue';
const tabs = [
  { name: 'A', comp: Shop }, 
  { name: 'B', comp: Knowledge }
]

// using shallowRef to stop Vue from turning component definitions to reactive objects
// use normal ref to see a warning
const currentTab = shallowRef(tabs[0]);
</script>

Demo

If I change <component :is=currentTab ></component> to <A/>, it shows up

Well I really doubt it – unless, of course, you have your components registered globally somewhere else (in code not shown in the question). If you try to add <A/> into a <template> in the linked demo, it does not work…

👤Michal Levý

Leave a comment