Problems when using dynamic components

[hzlzsm]

When I use "component" in Vue3 setup, binding the "is" attribute value with a string can be parsed as a component in webpack projects, but it will be parsed as an HTML tag in Vite.Do I need to modify certain configurations in the Vite project?

The following is the code used, which is identical in the two projects:

<template>
  <q-page class="row items-center justify-evenly">
    <q-inner-loading :showing="show">
      <!-- <q-spinner-bars color="primary" size="50px"></q-spinner-bars> -->
      <component :is="'q-spinner-bars'" />
    </q-inner-loading>
  </q-page>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const show = ref(true);
</script>

[stefanvanherwijnen]

Use

<component :is="QSpinnerBars" />

import { QSpinnerBars } from 'quasar'

[hzlzsm]

The value bound to the 'is' attribute is passed in by the parent component, in order to flexibly use spinner.

[stefanvanherwijnen]

In that case you need to use a slot and pass the component (prop).

[hzlzsm]

Okay, I will do it this way. Thank you for your suggestion. Also, I would like to know why the above writing method doesn't work in Vite, but it works in Webpack?

[stefanvanherwijnen]

Probably a plugin or feature in webpack that auto imports the component where it finds a string. But I'd recommend using the right approach instead of a build tool applying some magic anyway.