### Basic Vite Plugin Uni Components Setup

Source: https://context7.com/uni-helper/vite-plugin-uni-components/llms.txt

Demonstrates the basic setup for @uni-helper/vite-plugin-uni-components in a Vite configuration file. Ensure this plugin is registered before the Uni() plugin.

```typescript
import { defineConfig } from 'vite'
import Uni from '@dcloudio/vite-plugin-uni'
import Components from '@uni-helper/vite-plugin-uni-components'

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

--------------------------------

### Install @uni-helper/vite-plugin-uni-components

Source: https://github.com/uni-helper/vite-plugin-uni-components/blob/main/packages/core/README.md

Installs the @uni-helper/vite-plugin-uni-components package as a development dependency using pnpm. This is the initial step before configuring the plugin in your Vite project.

```bash
pnpm i -D @uni-helper/vite-plugin-uni-components
```

--------------------------------

### Implement Custom Component and Directive Resolvers

Source: https://context7.com/uni-helper/vite-plugin-uni-components/llms.txt

Provides an example of creating custom resolvers for third-party component and directive libraries. This allows for flexible integration with any component library by defining custom resolution logic.

```typescript
import { defineConfig } from 'vite'
import Uni from '@dcloudio/vite-plugin-uni'
import Components from '@uni-helper/vite-plugin-uni-components'
import type { ComponentResolver } from '@uni-helper/vite-plugin-uni-components'

const MyLibraryResolver: ComponentResolver = {
  type: 'component',
  resolve: (name: string) => {
    // Match components starting with "My"
    if (name.match(/^My[A-Z]/)) {
      return {
        name,
        from: `my-component-library/lib/${name.toLowerCase()}`,
      }
    }
  },
}

const MyDirectiveResolver: ComponentResolver = {
  type: 'directive',
  resolve: (name: string) => {
    if (name === 'loading') {
      return {
        name: 'vLoading',
        from: 'my-directives/loading',
      }
    }
  },
}

export default defineConfig({
  plugins: [
    Components({
      resolvers: [MyLibraryResolver, MyDirectiveResolver],
      directives: true, // Enable directive auto-import
    }),
    Uni(),
  ],
})
```

--------------------------------

### Utility Functions for Component Name Transformations

Source: https://context7.com/uni-helper/vite-plugin-uni-components/llms.txt

Provides utility functions for converting component names between different casing conventions (PascalCase, camelCase, kebab-case). These functions are useful for creating custom resolvers or other tooling that requires consistent naming. It also shows an example of using `kebabCase` within a custom `ComponentResolver`. Dependencies include `@uni-helper/vite-plugin-uni-components`.

```typescript
import { pascalCase, camelCase, kebabCase } from '@uni-helper/vite-plugin-uni-components'

// Convert naming conventions
const component1 = pascalCase('my-component') // 'MyComponent'
const component2 = camelCase('my-component') // 'myComponent'
const component3 = kebabCase('MyComponent') // 'my-component'

// Use in custom resolver
import type { ComponentResolver } from '@uni-helper/vite-plugin-uni-components'

const CustomResolver: ComponentResolver = {
  type: 'component',
  resolve: (name: string) => {
    const kebabName = kebabCase(name)
    return {
      name,
      from: `my-library/components/${kebabName}/${kebabName}.vue`,
    }
  },
}
```

--------------------------------

### Configure Custom Directories and Extensions

Source: https://context7.com/uni-helper/vite-plugin-uni-components/llms.txt

Shows how to configure custom directories to scan for components, specify file extensions to match, and enable subdirectory searching. It also configures TypeScript declaration file generation.

```typescript
import { defineConfig } from 'vite'
import Uni from '@dcloudio/vite-plugin-uni'
import Components from '@uni-helper/vite-plugin-uni-components'

export default defineConfig({
  plugins: [
    Components({
      dirs: ['src/components', 'src/ui-components'],
      extensions: ['vue', 'tsx'],
      deep: true, // Search subdirectories
      dts: 'components.d.ts', // TypeScript declaration file
    }),
    Uni(),
  ],
})
```

--------------------------------

### Programmatic Usage of Vite Plugin Uni Components Context

Source: https://context7.com/uni-helper/vite-plugin-uni-components/llms.txt

Demonstrates how to use the plugin's Context API programmatically for advanced scenarios like custom build tools or framework integration. It covers creating a context, setting the project root, transforming code, accessing the component registry, and generating type declarations. Dependencies include `@uni-helper/vite-plugin-uni-components`.

```typescript
import { Context } from '@uni-helper/vite-plugin-uni-components'
import type { ComponentResolver } from '@uni-helper/vite-plugin-uni-components'

// Create context
const ctx = new Context({
  dirs: ['src/components'],
  extensions: ['vue'],
  resolvers: [
    {
      type: 'component',
      resolve: (name) => {
        if (name === 'CustomButton') {
          return { from: 'my-lib/button', name: 'Button', as: 'CustomButton' }
        }
      },
    },
  ],
  transformer: 'vue3',
})

// Set project root
ctx.setRoot('/path/to/project')

// Transform code
const code = `
const render = (_ctx, _cache) => {
  const _component_my_button = _resolveComponent("my-button")
  return _createBlock(_component_my_button)
}
`

const result = await ctx.transform(code, 'App.vue')
console.log(result.code) // Contains auto-imported components

// Access component registry
const componentMap = ctx.componentNameMap
console.log(Object.keys(componentMap)) // ['MyButton', 'UserCard', ...]

// Generate TypeScript declarations
ctx.generateDeclaration()
```

--------------------------------

### Integrate UI Library Resolvers

Source: https://context7.com/uni-helper/vite-plugin-uni-components/llms.txt

Demonstrates how to use built-in resolvers for popular UniApp UI frameworks like uni-ui, wot-design-uni, uv-ui, and uview-pro. Multiple resolvers can be combined.

```typescript
import { defineConfig } from 'vite'
import Uni from '@dcloudio/vite-plugin-uni'
import Components from '@uni-helper/vite-plugin-uni-components'
import { UniUIResolver, WotResolver, UvResolver, uViewProResolver } from '@uni-helper/vite-plugin-uni-components/resolvers'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [
        UniUIResolver({
          exclude: 'UniTest', // Exclude specific components
        }),
        WotResolver(),
        UvResolver(),
        uViewProResolver(),
      ],
    }),
    Uni(),
  ],
})
```

--------------------------------

### Advanced Component Matching with Glob Patterns

Source: https://context7.com/uni-helper/vite-plugin-uni-components/llms.txt

Provides precise control over which files are recognized as components using glob patterns. This method bypasses the `dirs` and `extensions` options, offering maximum flexibility in component selection and exclusion.

```typescript
import {
  defineConfig
} from 'vite'
import Uni from '@dcloudio/vite-plugin-uni'
import Components from '@uni-helper/vite-plugin-uni-components'

export default defineConfig({
  plugins: [
    Components({
      globs: [
        'src/components/**/*.vue',
        'src/ui/**/*.{vue,tsx}',
        '!src/components/internal/**',
      ],
    }),
    Uni(),
  ],
})
```

--------------------------------

### Configure Vite for UniApp Components

Source: https://github.com/uni-helper/vite-plugin-uni-components/blob/main/packages/core/README.md

Configures Vite to use the @uni-helper/vite-plugin-uni-components plugin. This involves importing the plugin and adding it to the Vite configuration, ensuring it's placed before the Uni plugin.

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // make sure put it before `Uni()`
    Components(),
    Uni(),
  ],
})
```

--------------------------------

### Directory Namespacing for Component Naming

Source: https://context7.com/uni-helper/vite-plugin-uni-components/llms.txt

Enables hierarchical component naming based on folder structure to prevent name collisions and organize components. Redundant prefixes can be collapsed. This feature helps in creating unique and organized component names.

```typescript
import {
  defineConfig
} from 'vite'
import Uni from '@dcloudio/vite-plugin-uni'
import Components from '@uni-helper/vite-plugin-uni-components'

export default defineConfig({
  plugins: [
    Components({
      dirs: 'src/components',
      directoryAsNamespace: true,
      collapseSamePrefixes: true,
      globalNamespaces: ['global'],
    }),
    Uni(),
  ],
})

// Example:
// src/components/user/profile/Card.vue -> <UserProfileCard />
// src/components/global/Button.vue -> <Button /> (global skipped)
// src/components/button/ButtonPrimary.vue -> <ButtonPrimary /> (collapsed)
```

--------------------------------

### Configure .npmrc for Vue Hoisting

Source: https://github.com/uni-helper/vite-plugin-uni-components/blob/main/packages/core/README.md

Configures the .npmrc file to manage hoisting patterns for Vue dependencies when using pnpm. This helps resolve potential dependency issues, particularly for Vue-related packages, as suggested by an issue in the unplugin-vue-components repository.

```ini
// .npmrc
public-hoist-pattern[]=@vue*
// or 
// shamefully-hoist = true
```

--------------------------------

### Generating TypeScript Declarations for Global Components

Source: https://context7.com/uni-helper/vite-plugin-uni-components/llms.txt

Automatically generates TypeScript declaration files (`.d.ts`) to register all auto-imported components globally. This provides comprehensive IDE autocomplete and type-checking support for components.

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

export default defineConfig({
  plugins: [
    Components({
      dts: true,
      types: [
        {
          from: 'vue-router',
          names: ['RouterLink', 'RouterView'],
        },
      ],
    }),
    Uni(),
  ],
})

// Generated components.d.ts:
// declare module 'vue' {
//   export interface GlobalComponents {
//     MyButton: typeof import('./src/components/MyButton.vue')['default']
//     UserCard: typeof import('./src/components/user/Card.vue')['default']
//   }
// }
```

--------------------------------

### Transforming Component Import Paths

Source: https://context7.com/uni-helper/vite-plugin-uni-components/llms.txt

Enables custom transformations for component import paths. This is beneficial for aliasing, rewriting paths, or integrating with module federation. It allows dynamic modification of how component imports are resolved.

```typescript
import {
  defineConfig
} from 'vite'
import Uni from '@dcloudio/vite-plugin-uni'
import Components from '@uni-helper/vite-plugin-uni-components'

export default defineConfig({
  plugins: [
    Components({
      importPathTransform: (path) => {
        if (path.startsWith('/src/components/')) {
          return path.replace('/src/components/', '@components/')
        }
        if (path.includes('heavy-library')) {
          return 'https://cdn.example.com/heavy-library.js'
        }
        return path
      },
    }),
    Uni(),
  ],
})
```

--------------------------------

### Configure Viewport Meta Tag with CSS env/constant Support (JavaScript)

Source: https://github.com/uni-helper/vite-plugin-uni-components/blob/main/playground/index.html

This snippet configures the viewport meta tag. It detects if the browser supports CSS `env()` or `constant()` functions, which are used for safe area insets on certain devices. Based on this support, it dynamically adds `viewport-fit=cover` to the meta tag for better layout adaptation. This is useful for uni-app projects aiming for consistent display across various screen types.

```javascript
const coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write( `<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0${ coverSupport ? ', viewport-fit=cover' : ''}" />`)
```

--------------------------------

### Excluding Components from Auto-import

Source: https://context7.com/uni-helper/vite-plugin-uni-components/llms.txt

Allows specific components to be excluded from automatic import, which is useful for components requiring manual control or those that might conflict with other libraries. Both component names and file paths can be targeted for exclusion.

```typescript
import {
  defineConfig
} from 'vite'
import Uni from '@dcloudio/vite-plugin-uni'
import Components from '@uni-helper/vite-plugin-uni-components'

export default defineConfig({
  plugins: [
    Components({
      excludeNames: ['Book', /^Internal/, 'Legacy.*'],
      exclude: [/.internal.vue$/, /temp/],
      allowOverrides: false,
    }),
    Uni(),
  ],
})
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.