Files
Road_roller/.claude/skills/uni-helper/references/plugin-components.md
2026-09-17 08:52:53 +08:00

2.3 KiB

name, description
name description
vite-plugin-uni-components On-demand automatic component imports for uni-app - derived from unplugin-vue-components

vite-plugin-uni-components

Automatic on-demand component imports for uni-app. Derived from unplugin-vue-components with uni-app specific adaptations.

Installation

npm i -D @uni-helper/vite-plugin-uni-components

Setup

// vite.config.ts
import Uni from '@dcloudio/vite-plugin-uni'
import Components from '@uni-helper/vite-plugin-uni-components'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    Components(),  // Must be before Uni()
    Uni(),
  ],
})

Features

  • Automatic component imports from src/components
  • Supports UI library resolvers
  • Generates TypeScript declarations
  • Handles default export for third-party UI libraries

Supported UI Libraries

Built-in resolvers for:

Library Import
Ano UI AnoUIResolver()
uni-ui UniUIResolver()
wot-design-uni WotDesignUniResolver()
uv-uni UvUniResolver()
uview-pro UviewProResolver()
z-paging ZPagingResolver()

TypeScript Declarations

For pnpm users, create .npmrc:

shamefully-hoist = true

Generated components.d.ts example:

declare module 'vue' {
  export interface GlobalComponents {
    AButton: typeof import('ano-ui/components/AButton/AButton.vue')['default']
    UniCalendar: typeof import('@dcloudio/uni-ui/lib/uni-calendar/uni-calendar.vue')['default']
    MyComponent: typeof import('./src/components/MyComponent.vue')['default']
  }
}

Third-Party Component Handling

For third-party components like @dcloudio/uni-ui and ano-ui, the plugin automatically adds the default property to handle H5 compatibility issues:

declare module 'vue' {
  export interface GlobalComponents {
-   AButton: typeof import('ano-ui/components/AButton/AButton.vue')['AButton']
+   AButton: typeof import('ano-ui/components/AButton/AButton.vue')['default']
  }
}

Full Configuration

See unplugin-vue-components documentation for all options.