@arco-plugins/vite-vue

For Vite build, load Arco Design styles on demand

Usage no npm install needed!

<script type="module">
  import arcoPluginsViteVue from 'https://cdn.skypack.dev/@arco-plugins/vite-vue';
</script>

README

@arco-plugins/vite-vue

Feature

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

Install

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

Usage

// vite.config.js

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


export default {
  ...
  plugins: [
    vitePluginForArco(Options),
  ],
}
// 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
componentPrefix {String} a componentPrefix

**Style import methods **

style: true will import less file

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

style: 'css' will import css file

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

style: false will not import any style file