unplugin-vue-components
unplugin-vue-components copied to clipboard
How to auto import naive ui vue component and styles in tsx or jsx
Describe the bug
Describe the bug
How to auto import ant design vue component and styles in tsx or jsx
I have imported NaiveUiResolver in two plug-ins, but there is no way to import naiveui components automatically in jsx.
import path from 'node:path';
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
import Components from 'unplugin-vue-components/vite';
export default Components({
dirs: ['src/components'],
include: [/\.vue$/, /\.vue\?vue/],
dts: path.resolve(process.cwd(), 'components.d.ts'),
extensions: ['vue'],
resolvers: [NaiveUiResolver()]
});
import path from 'node:path';
import AutoImport from 'unplugin-auto-import/vite';
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
export default AutoImport({
dts: path.resolve(process.cwd(), 'auto-imports.d.ts'),
include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
imports: [
'vue',
'vue-router',
'vue-i18n',
'pinia',
],
dirs: [
'src/constants',
],
vueTemplate: true,
eslintrc: {
enabled: true,
filepath: path.resolve(process.cwd(), '.eslintrc-auto-import.json')
},
resolvers: [NaiveUiResolver()]
});
Reproduction
System Info
-
Used Package Manager
npm
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.
Reproduction
System Info
-
Used Package Manager
npm
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.