Can't get auto import of NuxtIcons to work

[lud-hu]

Describe the bug

I'm currently trying to integrate storybook into an existing nuxt project. It sounds easy but actually there aren't any working plugins/libs for this (at least none that is still maintained and working) so I'm trying to figure it out myself. Storybook itself runs fine but it fails as soon as I want to use an auto imported component, e.g. <NuxtIcon />.

For this I try to set up the unplugin-auto-import and according to the docs it should work like this:

    AutoImport({
      imports: [
        "vue",
        "vue-router",
        {
          "nuxt-icons": ["NuxtIcon", ["default", "NuxtIcon"]],
        },
      ],
      dirs: ["../composables"],
      vueTemplate: true,
    }),

Unfortunately it isn't. Is this a bug? Any ideas how to properly set this up?

Reproduction

https://github.com/lud-hu/nuxt-storybook-auto-import-repro

System Info

System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1
    Memory: 55.63 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - /opt/homebrew/opt/node@18/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.2.3 - /opt/homebrew/opt/node@18/bin/npm
  Browsers:
    Chrome: 120.0.6099.216
    Edge: 120.0.2210.133
    Safari: 17.0

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.