# @arco-plugins/vite-vue

> For Vite build, load Arco Design styles on demand

Latest version **1.4.6** (published 2025-09-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @arco-plugins/vite-vue
pnpm add @arco-plugins/vite-vue
yarn add @arco-plugins/vite-vue
bun add @arco-plugins/vite-vue
```

## Health

**Score 40/100 (D)** — status: stable.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 1.4.6 |
| Published | 2025-09-01 |
| First published | 2022-02-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 31.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 78 |
| Author | arco-design |
| Maintainers | pjy, jinghm318, kiraxy, flsion, yinkaihui |
| Keywords | arco, arco-design, arco-plugin, plugin, vite |

## Links

- npm: https://www.npmjs.com/package/@arco-plugins/vite-vue
- Repository: https://github.com/arco-design/arco-plugins
- Homepage: https://github.com/arco-design/arco-plugins#readme
- Issues: https://github.com/arco-design/arco-plugins/issues
- npm.io page: https://npm.io/package/@arco-plugins/vite-vue

## Dependencies (6)

- [@types/node](https://npm.io/package/@types/node.md) ^16.11.10
- [@babel/types](https://npm.io/package/@babel/types.md) ^7.12.12
- [@babel/parser](https://npm.io/package/@babel/parser.md) ^7.12.11
- [@babel/traverse](https://npm.io/package/@babel/traverse.md) ^7.12.12
- [@babel/generator](https://npm.io/package/@babel/generator.md) ^7.12.11
- [@babel/helper-module-imports](https://npm.io/package/@babel/helper-module-imports.md) ^7.12.5

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 1.4.6 (latest) — 2025-09-01
- 1.4.5 — 2023-03-13
- 1.4.4 — 2023-03-13
- 1.4.3 — 2023-03-03
- 1.4.2 — 2022-10-14
- 1.4.1 — 2022-10-14
- 1.4.0 — 2022-10-11
- 1.3.9 — 2022-09-30
- 1.3.8 — 2022-09-27
- 1.3.7 — 2022-09-23
- 1.3.6 — 2022-09-21
- 1.3.5 — 2022-07-22
- 1.3.4 — 2022-07-22
- 1.3.0 — 2022-06-22
- 1.2.0 — 2022-06-13
- … 2 more at https://npm.io/package/@arco-plugins/vite-vue/versions

## README

# @arco-plugins/vite-vue

## Feature

1. `Style lazy load`
2. `Theme import`
3. `Icon replacement`

> `Style lazy load` doesn't work during development for better experience.

## Install

```bash
npm i @arco-plugins/vite-vue -D
```

## Usage

```js
// vite.config.js

import { vitePluginForArco } from '@arco-plugins/vite-vue'

export default {
  ...
  plugins: [
    vitePluginForArco(Options),
  ],
}
```

```diff
// main.js

import { createApp } from 'vue'
- import ArcoVue from '@arco-design/web-vue';
- import ArcoVueIcon from '@arco-design/web-vue/es/icon';
import App from './App.vue';
- import '@arco-design/web-vue/dist/arco.css';

const app = createApp(App);
- app.use(ArcoVue);
- app.use(ArcoVueIcon);
app.mount('#app');
```

```tsx
// *.vue

<script setup>
import { Button } from '@arco-design/web-vue';
</script>

<template>
  <div>
    <Button type="secondary">Cancel</Button>
    <a-button type="primary">Submit</a-button>
    <component is="a-button" loading>Loading</component>
  </div>
</template>
```

## Options

The plugin supports the following parameters:

|        Params         |          Type          | Default Value | Description                                                                         |
| :-------------------: | :--------------------: | :-----------: | :---------------------------------------------------------------------------------- |
|      **`theme`**      |       `{String}`       |      `-`      | Theme package name                                                                  |
|     **`iconBox`**     |       `{String}`       |      `-`      | Icon library package name                                                           |
|   **`modifyVars`**    |       `{Object}`       |      `-`      | Less variables                                                                      |
|      **`style`**      |   `{'css'\|Boolean}`   |    `true`     | Style import method                                                                 |
| **`varsInjectScope`** | `{(string\|RegExp)[]}` |      `-`      | Scope of injection of less variables (modifyVars and the theme package's variables) |
| **`componentPrefix`** |       `{String}`       |     `'a'`     | Component prefix                                                                    |
|   **`iconPrefix`**    |       `{String}`       |      `icon`      | Icon component prefix                                                               |

**Style import methods **

`style: true` will import less file

```js
import '@arco-design/web-vue/Affix/style';
```

`style: 'css'` will import css file

```js
import '@arco-design/web-vue/Affix/style/css';
```

`style: false` will not import any style file

---
_Source: https://npm.io/package/@arco-plugins/vite-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._