unplugin-vue-components icon indicating copy to clipboard operation
unplugin-vue-components copied to clipboard

How to auto import naive ui vue component and styles in tsx or jsx

Open maxfrees opened this issue 8 months ago • 0 comments

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.

Image

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.

maxfrees avatar Feb 18 '25 15:02 maxfrees