Usage with unplugin-vue-components, other components became Unknown

[Zehir]

I have some issue, I think there is some kind of conflicts between the 2 plugins.

I am using Vite;

plugins: [
    // https://github.com/antfu/unplugin-vue-components
    Components({
      // allow auto load components under `./src/components/`
      extensions: ['vue'],
      // allow auto import and register components
      include: [/\.vue$/, /\.vue\?vue/],
      dts: 'src/components.d.ts',
    }),

    // https://www.npmjs.com/package/vite-plugin-vuetify
    Vuetify({
      autoImport: true,
    }),
]

And I am loading Vuetify from a module (Vitesse template)

import 'vuetify/styles/main.sass'

import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader

// Labs
// https://next.vuetifyjs.com/en/labs/introduction/

import { createVuetify } from 'vuetify'
import VuetifyUseDialog from 'vuetify-use-dialog'

import { type UserModule } from '../types'

// Import Vuetify
export const install: UserModule = ({ app }) => {
  const vuetify = createVuetify({
    components: {
      ...labs,
    },
    theme: {
      defaultTheme: 'dark',
    },
    icons: {
      defaultSet: 'mdi',
      aliases,
      sets: {
        mdi,
      },
    },
  })

  app.use(vuetify)

  app.use(VuetifyUseDialog)
}

My issue is that as soon I have the module, the createVuetify seems to break something else in typescript because, even if the component still works in vscode they all became Unknown

If you want a repro repo you can use this one : https://github.com/deconz-community/ddf-tools/tree/main/packages/toolbox

[KaelWD]

The linked project builds fine for me, and doesn't show other components as unknown in vscode.

[Zehir]

Yes sorry I forgot to close this issue, I finally found a work around by including the .d.ts files for some some resaon without the vuetify resolver it's not needed

[0x00A1FA]

Yes sorry I forgot to close this issue, I finally found a work around by including the .d.ts files for some some resaon without the vuetify resolver it's not needed

@Zehir Can you please explain how exactly? I've run into the same issue. I've installed Vuetify and now all my custom components are unknown.

[Zehir]

Yes sorry I forgot to close this issue, I finally found a work around by including the .d.ts files for some some resaon without the vuetify resolver it's not needed

@Zehir Can you please explain how exactly? I've run into the same issue. I've installed Vuetify and now all my custom components are unknown.

@0x00A1FA I don't really remember but I think I added the file generated by autoimport into the tsconfig.json. You can compare with my repo : https://github.com/deconz-community/ddf-tools/tree/main/packages/toolbox

[zhuddan]

👍It works! thank you @Zehir ； but i have a problem， i think the declaration file generated by unplugin-auto-import define "declare module 'vue' "，but vuetify define "declare module '@vue/runtime-core'" (node_modules\vuetify\lib\index.d.mts)，May I ask who can tell me the difference between these two？