Using auto import, generates auto import for components

[jens-morten-mikkelsen]

Hello 👋 I've implemented auto import to fix a compiler issue. But after doing so i'm noticing that my components.d.ts is starting to contain a lot of my vue components. Even some that doesn't use my icons. Im just wondering, why this is happening?

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    BasketSustainabilityKeyFigures: typeof import('./src/components/basket/BasketSustainabilityKeyFigures.vue')['default']
    CallToActionButton: typeof import('./src/components/shared/CallToActionButton.vue')['default']
    HeaderBasketActionLinks: typeof import('./src/components/header/HeaderBasketActionLinks.vue')['default']
    HeaderBasketKeyFigures: typeof import('./src/components/header/HeaderBasketKeyFigures.vue')['default']
    HeaderBasketKeyFiguresActionLink: typeof import('./src/components/header/HeaderBasketKeyFiguresActionLink.vue')['default']
    HeaderDeliveryDate: typeof import('./src/components/header/HeaderDeliveryDate.vue')['default']
    HeaderDeliveryDateActionLink: typeof import('./src/components/header/HeaderDeliveryDateActionLink.vue')['default']
    HeaderMiniBasket: typeof import('./src/components/header/HeaderMiniBasket.vue')['default']
    HeaderMiniBasketActionLink: typeof import('./src/components/header/HeaderMiniBasketActionLink.vue')['default']
    IconInfo: typeof import('./src/components/ng-only/IconInfo.vue')['default']
    IconUiChevronRight: typeof import('~icons/ui/chevron-right')['default']
    IconUiInfo: typeof import('~icons/ui/info')['default']
    ReplaceProduct: typeof import('./src/components/favorite-lists/replace-product/ReplaceProduct.vue')['default']
    ReplaceProductConfirmationModal: typeof import('./src/components/favorite-lists/replace-product/ReplaceProductConfirmationModal.vue')['default']
    ReplaceProductConfirmationModalLineItem: typeof import('./src/components/favorite-lists/replace-product/ReplaceProductConfirmationModalLineItem.vue')['default']
    SideDrawerOverlay: typeof import('./src/components/shared/SideDrawerOverlay.vue')['default']
    SustainabilityInformationOverlay: typeof import('./src/components/sustainability/SustainabilityInformationOverlay.vue')['default']
    VuePortalTarget: typeof import('./src/components/shared/VuePortalTarget.vue')['default']
  }
}

[antfu]

Sorry I don't understand your question.

[jens-morten-mikkelsen]

@antfu my question is, why is it generating auto-importable components, that is not my icons. from the code that is in my components.d.ts file, all i expected to see is:

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    IconUiChevronRight: typeof import('~icons/ui/chevron-right')['default']
    IconUiInfo: typeof import('~icons/ui/info')['default']
  }
}

here is my vite config:

import path from "path";
import { defineConfig } from "vite";
import { createVuePlugin as Vue2 } from "vite-plugin-vue2";
import legacy from "@vitejs/plugin-legacy";
import checker from "vite-plugin-checker";
import Components from "unplugin-vue-components/vite";
import IconsResolver from "unplugin-icons/resolver";
import Icons from "unplugin-icons/vite";
import { FileSystemIconLoader } from "unplugin-icons/loaders";

const config = defineConfig(({ mode }) => {
    const isProduction = mode === "production";
    return {
        resolve: {
            alias: {
                "@": path.resolve(__dirname, "src")
            },
            dedupe: ["vue-demi"]
        },
        build: {
            minify: isProduction,
            manifest: true,
            rollupOptions: {
                input: "src/main.ts"
            }
        },
        plugins: [
            legacy({
                targets: ["ie >= 11"],
                additionalLegacyPolyfills: ["regenerator-runtime/runtime"]
            }),
            Vue2(),
            Components({
                resolvers: [
                    IconsResolver({
                        prefix: "icon",
                        customCollections: [
                            "ui"
                        ]
                    })
                ]
            }),
            checker({
                vueTsc: true
            }),            
            Icons({
                compiler: "vue2",
                customCollections: {
                    "ui": FileSystemIconLoader(
                        "./src/assets/icons/ui")
                }
            })
        ],
        server: {
            port: 3333
        }
    };
});

export default config;

[antfu]

unplugin-vue-components auto imports all components under src/components. If you don't want t it, set

Components({
  dirs: []
})

to disable

[jens-morten-mikkelsen]

@antfu Okay, thanks. Just for clearification if anybody runs into the same issue. You still have to define your icon dir in the dirs option. eg:

Components({
    dirs: ["./src/assets/icons"],
    resolvers: [
        IconsResolver({
            prefix: "icon",
            customCollections: [
                "ui"
            ]
        })
    ]
}),