unplugin-auto-import: Vue3 tsx auto import invalid
vite.config.ts
`import {fileURLToPath, URL} from ‘url’
import {defineConfig} from ‘vite’ import vue from ‘@vitejs/plugin-vue’ import vueJsx from ‘@vitejs/plugin-vue-jsx’ import AutoImport from ‘unplugin-auto-import/vite’ import { ElementPlusResolver } from ‘unplugin-vue-components/resolvers’ import Components from ‘unplugin-vue-components/vite’ import IconsResolver from ‘unplugin-icons/resolver’ import Icons from ‘unplugin-icons/vite’ import ElementPlus from ‘unplugin-element-plus/vite’ export default defineConfig({ plugins: [ vue({reactivityTransform: true}), vueJsx(), AutoImport({ include: [ /.[tj]sx?$/, // .ts, .tsx, .js, .jsx /.vue$/, /.vue?vue/, // .vue /.md$/, // .md ], imports: [‘vue’, ‘vue/macros’,‘@vueuse/core’], dts: ‘./auto-imports.d.ts’, resolvers: [ ElementPlusResolver(), IconsResolver({ prefix: ‘abc’, enabledCollections: [‘ep’,‘mdi’], }), ], }), Components({ resolvers: [ IconsResolver({ prefix: ‘abc’, enabledCollections: [‘ep’,‘mdi’], }), ElementPlusResolver(), ], dts: ‘./components.d.ts’, }), ElementPlus({ // importStyle: ‘sass’, useSource: true }), Icons({ autoInstall: true, }), ], resolve: { alias: { ‘@’: fileURLToPath(new URL(‘./src’, import.meta.url)) } }, })`
index.tsx
import {ElMenu,ElMenuItem,ElSubMenu} from "element-plus" export default defineComponent({ components:{ // ElMenu,ElMenuItem,ElSubMenu }, props: { }, setup() { return () => { return ( <el-menu className="menu-icon-svg" > <abc-ep-close /> </el-menu> ) } } })
icon auto import is also invalid
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Comments: 20 (6 by maintainers)
@zz541843 it works https://github.com/zz541843/unplugin-auto-import_issues/pull/1
I did it in these steps
dirs
as wellThank you for your help !