How to make <component :is= work?

klodoma commented 1 year ago

Describe the bug

I use this plugin and the components are registered. But if I use <component :is="'the-counter'" initial="20" /> it doesn't find the component.

Any hints?

The same happens also in https://github.com/antfu/vitesse app

    <the-counter initial="100"/> --working 
    <TheCounter initial="20"></TheCounter> - working
    <component :is="'the-counter'" initial="20" /> - not working

Do I need to register it as a "web-component"?

Reproduction: Install https://github.com/antfu/vitesse and put in the upper code somewhere

Reproduction

Described up.

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor            
    Memory: 14.03 GB / 47.92 GB
  Binaries:
    Node: 16.19.0 - ~\scoop\apps\nvm\current\nodejs\nodejs\node.EXE
    Yarn: 1.22.19 - ~\scoop\apps\nvm\current\nodejs\nodejs\yarn.CMD
    npm: 9.6.5 - ~\scoop\apps\nvm\current\nodejs\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1702.0), Chromium (113.0.1774.42)
    Internet Explorer: 11.0.22621.1

Used Package Manager

yarn

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guide.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
[X] The provided reproduction is a minimal reproducible of the bug.

lishaobos commented 1 year ago

look at this https://github.com/antfu/unplugin-vue-components/issues/643#issuecomment-1588951920

theobscenezen commented 1 year ago

I've found a solution for our case, maybe it helps you too. You need to import the icon raw. Example with a save-icon looks like this: Parent component:

<template>
  <child :actions="actionArray" />
</template>

<script setup>
import SaveIcon from '~icons/ic/baseline-save?raw&width=25px&height=25px';

const actionArray = [{icon: SaveIcon}];
</script>

Inside the child component, when looping over "actions" array:

<template v-for="action in actions">
  <span v-html="action.icon" />
</template>

I'm sure this can also be dynamically applied to your case.

unplugin / unplugin-vue-components