# Element Plus — Vue 3 UI Library by the Element Team

> Element Plus is a Vue 3 UI library made by the Element team. 60+ components with desktop-first design, clean aesthetic, TypeScript support, and a huge Chinese developer community. The Vue 3 successor to Element UI.

## Install

Save as a script file and run:

## Quick Use

```bash
npm i element-plus
```

```ts
// main.ts
import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";

createApp(App).use(ElementPlus).mount("#app");
```

```vue
<!-- App.vue -->
<template>
  <el-card>
    <el-form :model="form" label-width="80px">
      <el-form-item label="Name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="Level">
        <el-select v-model="form.level">
          <el-option label="Free" value="free" />
          <el-option label="Pro" value="pro" />
        </el-select>
      </el-form-item>
      <el-button type="primary">Submit</el-button>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { reactive } from "vue";
const form = reactive({ name: "", level: "free" });
</script>
```

## Intro

Element Plus is a Vue 3 UI library made by the Element team at Ele.me (Alibaba). Successor to Element UI (Vue 2). Focused on clean, desktop-first design for admin dashboards and B2B apps. Massive Chinese developer adoption with 80+ components covering most enterprise needs.

- **Repo**: https://github.com/element-plus/element-plus
- **Stars**: 27K+
- **Language**: TypeScript
- **License**: MIT

## What Element Plus Does

- **80+ components** — Button, Input, Select, Table, Form, DatePicker, Tree, Cascader, Upload
- **Desktop-first** — polished for large screens, but responsive
- **Dark mode** — built-in theme switch
- **i18n** — 50+ locales
- **Form engine** — reactive form with validation rules
- **Icons** — standalone @element-plus/icons-vue package
- **SSR** — Nuxt module

## Architecture

Built on Vue 3 Composition API. Styles use SCSS with design tokens via CSS custom properties. Runtime theming via CSS variables; components consume tokens.

## Self-Hosting

Client library.

## Key Features

- 80+ components
- Vue 3 + Composition API
- TypeScript-first
- Dark mode built in
- 50+ locales
- Treeshakable via unplugin-vue-components + element-plus/auto-resolver
- SSR (Nuxt) ready
- Responsive layout
- Form validation engine

## Comparison

| Library | Design | Components | Target |
|---|---|---|---|
| Element Plus | Desktop flat | 80+ | Admin/B2B |
| Vuetify | Material Design | 80+ | Apps |
| Naive UI | Flat | 80+ | Modern UIs |
| PrimeVue | Multi-theme | 90+ | Apps |
| Ant Design Vue | Enterprise | 60+ | Admin |

## 常见问题 FAQ

**Q: Element UI vs Element Plus？**
A: Element UI 是 Vue 2 版本，已停止新功能。Vue 3 项目必须用 Element Plus。API 大部分兼容。

**Q: 按需引入？**
A: `npm i -D unplugin-auto-import unplugin-vue-components`，配合 ElementPlusResolver 自动按需导入组件和样式。

**Q: 和 Vuetify 选哪个？**
A: 中文项目/B2B 后台偏好 Element Plus（国内生态大）；需要 Material Design 美感选 Vuetify。

## 来源与致谢 Sources

- Docs: https://element-plus.org
- GitHub: https://github.com/element-plus/element-plus
- License: MIT

---
Source: https://tokrepo.com/en/workflows/25e2a2cf-35b8-11f1-9bc6-00163e2b0d79
Author: Script Depot