Supported Libraries#

ew-auto-import-tool currently supports the following Vue component libraries. For each library, the tool automatically configures the necessary plugins and dependencies for on-demand imports.

Element Plus#

Element Plus is a Vue 3 based component library for designers and developers.

Features#

• Comprehensive design system with over 50 components
• TypeScript support
• Internationalization support
• Theme customization

Configuration#

When configuring Element Plus, the tool will:

1. Install dependencies:

   • element-plus
   • unplugin-auto-import
   • unplugin-vue-components

2. Configure Vite plugins with the ElementPlusResolver

Usage Example#

1<template>
2  <el-button type="primary">Primary Button</el-button>
3  <el-input v-model="input" placeholder="Please input"></el-input>
4</template>
5
6<script setup lang="ts">
7const input = ref("");
8</script>

Ant Design Vue#

Ant Design Vue is an enterprise-class UI components based on Ant Design and Vue.

Features#

• Enterprise-level design system
• Rich set of high-quality components
• Written in TypeScript with complete types
• Internationalization support

Configuration#

When configuring Ant Design Vue, the tool will:

1. Install dependencies:

   • ant-design-vue
   • unplugin-auto-import
   • unplugin-vue-components

2. Configure Vite plugins with the AntDesignVueResolver

Usage Example#

1<template>
2  <a-button type="primary">Primary Button</a-button>
3  <a-input v-model:value="input" placeholder="Please input"></a-input>
4</template>
5
6<script setup lang="ts">
7const input = ref("");
8</script>

Naive UI#

Naive UI is a Vue 3 component library with TypeScript support and flexible theme customization.

Features#

• Over 80 components
• Theme customization
• TypeScript support
• Tree-shakable

Configuration#

When configuring Naive UI, the tool will:

1. Install dependencies:

   • naive-ui
   • unplugin-auto-import
   • unplugin-vue-components

2. Configure Vite plugins with the NaiveUiResolver

Usage Example#

1<template>
2  <n-button type="primary">Primary Button</n-button>
3  <n-input v-model:value="input" placeholder="Please input"></n-input>
4</template>
5
6<script setup lang="ts">
7const input = ref("");
8</script>

Vant#

Vant is a lightweight mobile UI component library for Vue.

Features#

• 60+ high-quality components
• 90%+ unit test coverage
• Extensive documentation and demos
• Support for tree shaking

Configuration#

When configuring Vant, the tool will:

1. Install dependencies:

   • vant
   • unplugin-auto-import
   • unplugin-vue-components

2. Configure Vite plugins with the VantResolver

Usage Example#

1<template>
2  <van-button type="primary">Primary Button</van-button>
3  <van-field v-model="input" placeholder="Please input"></van-field>
4</template>
5
6<script setup lang="ts">
7const input = ref("");
8</script>