Unable to auto import components with 'unplugin-vue-components'

[jimmylab]

Describe the bug

Unable to auto import components with unplugin-vue-components
Get [Vue warn]: Failed to resolve component on browser console.

Reproduce:

:: Init vite project
npm create vite@latest my-vite -- --template vue-ts
pushd my-vite
npm install
npm install -D unplugin-auto-import unplugin-vue-components
popd

:: Init electron-vite project
npm create @quick-start/electron@latest my-electron-vite -- --template vue-ts
pushd my-electron-vite
npm install
npm install -D unplugin-auto-import unplugin-vue-components
popd

// my-vite/vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue'],
      dts: 'src/auto-imports.d.ts',
      resolvers: [
      ],
      vueTemplate: true,
    }),
    Components({
      dts: 'src/components.d.ts',
      dirs: ['src/components'],
      extensions: ['vue'],
      resolvers: [
      ],
    }),
  ],
})

// my-electron-vite/electron.vite.config
import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()]
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  renderer: {
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src')
      }
    },
    plugins: [
      vue(),
      AutoImport({
        imports: ['vue'],
        dts: 'src/renderer/auto-imports.d.ts',
        resolvers: [
        ],
        vueTemplate: true,
      }),
      Components({
        dts: 'src/renderer/components.d.ts',
        dirs: ['src/renderer/src/components'],
        extensions: ['vue'],
        resolvers: [
        ],
      }),
    ]
  }
})

Two projects sharing same vue components code:

// App.vue (under app src dir)
<script setup lang="ts">
// Note: 'electron-vite' fails to load, without the import declaration:
// import HelloWorld from './components/HelloWorld.vue';
</script>

<template>
  <HelloWorld msg="Hello" />
</template>

// components/HelloWorld.vue (under app src dir)
<script setup lang="ts">
import { ref } from 'vue'
defineProps<{ msg: string }>()
</script>

<template>
  <h1>{{ msg }}</h1>
</template>

Electron-Vite Version

4.0.0

Electron Version

37.2.3

Vite Version

10.8.1

Validations

• Follow the Code of Conduct.
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[zihao1985]

This works for me so far.

 yarn add -D unplugin-vue-components @primevue/auto-import-resolver 

//electron.vite.config.ts

//electron-vite defaults
import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
//vue and tailwind
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
//auto import for vue component
import Components from 'unplugin-vue-components/vite'
import { PrimeVueResolver } from '@primevue/auto-import-resolver'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()]
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  renderer: {
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src')
      }
    },
    plugins: [
      vue(),
      tailwindcss(),
      Components({
        resolvers: [PrimeVueResolver()]
      })
    ]
  }
})

[jimmylab]

@zihao1985 I'm talking about the Component vue files created under /src/renderer/src/components, not the custom resolvers for 3rd party libraries. You misunderstood the topic.