unplugin / unplugin-auto-import

Auto import APIs on-demand for Vite, Webpack and Rollup
MIT License
3.19k stars 197 forks source link

[Help wanted] Issue with AutoImport and @iconify/vue in Vue Project #427

Open toimc opened 1 year ago

toimc commented 1 year ago

Describe the bug

First of all, I want to express my gratitude to the developers for their hard work on this project. Thank you!

I'm currently using the @iconify/vue library, which exports an Icon Vue component. I'd like to leverage the AutoImport library's imports feature to simplify the import process. Here's the relevant part of my code:

vite.config.ts:

AutoImport({
  include: [
    /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
    /\.vue$/,
    /\.vue\?vue/, // .vue
    /\.md$/ // .md
  ],

  // global imports to register
  imports: [
    // presets
    'vue',
    // 'vue-router'
    VueRouterAutoImports,
    '@vueuse/core',

    // Issue here
    { '@iconify/vue': ['Icon', 'addAPIProvider'] }
  ],
  resolvers: [ElementPlusResolver()],
  vueTemplate: true
})

However, even with this setup, I'm facing an issue. When I try to use the Icon component directly in a Vue template like this:

<Icon icon="ep:plus"></Icon>

It doesn't work as expected. I still have to manually import it in the script section like so:

<script setup lang="ts">
import { Icon } from '@iconify/vue'
</script>

This issue has been bothering me for quite some time, and I would greatly appreciate any guidance or solutions you can provide. Thank you in advance for your assistance!

Update:

It's quite peculiar; if I use dynamic components like this:

<component :is="Icon" icon="ep:plus"></component>

It renders correctly.

Reproduction

https://stackblitz.com/edit/vitejs-vite-gsph2u?file=src%2FApp.vue

System Info

System:
    OS: macOS 13.5.1
    CPU: (10) x64 Apple M1 Max
    Memory: 26.61 MB / 64.00 GB
    Shell: 3.5.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.15.0/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
    pnpm: 8.7.1 - ~/.nvm/versions/node/v18.15.0/bin/pnpm
  Browsers:
    Chrome: 116.0.5845.179
    Safari: 16.6

Used Package Manager

npm

Validations

stackblitz[bot] commented 1 year ago

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.