vite-plugins

# Vite Plugins Skill

Patterns for using and creating Vite plugins.

## Official Plugins

### React Plugin

```bash
npm install @vitejs/plugin-react
```

```typescript
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react({
      // Babel options
      babel: {
        plugins: ['@emotion/babel-plugin'],
      },
      // Fast Refresh options
      fastRefresh: true,
      // JSX runtime
      jsxRuntime: 'automatic',
    }),
  ],
})
```

### Legacy Browser Support

```bash
npm install @vitejs/plugin-legacy
```

```typescript
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
      polyfills: ['es.promise', 'es.array.iterator'],
    }),
  ],
})
```

## Community Plugins

### SVG as Components

```bash
npm install vite-plugin-svgr
```

```typescript
import svgr from 'vite-plugin-svgr'

export default defineConfig({
  plugins: [
    svgr({
      svgrOptions: {
        icon: true,
      },
    }),
  ],
})

// Usage
import { ReactComponent as Logo } from './logo.svg'
// or
import Logo from './logo.svg?react'
```

### Auto Import

```bash
npm install unplugin-auto-import
```

```typescript
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['react', 'react-router-dom'],
      dts: './src/auto-imports.d.ts',
    }),
  ],
})
```

### Component Auto Import

```bash
npm install unplugin-react-components
```

```typescript
import Components from 'unplugin-react-components/vite'

export default defineConfig({
  plugins: [
    Components({
      dirs: ['src/components'],
      dts: './src/components.d.ts',
    }),
  ],
})
```

### PWA Plugin

```bash
npm install vite-plugin-pwa
```

```typescript
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    VitePWA({
      register