element-plus
Advanced tools
Element Plus is a Vue 3 UI library that provides a wide range of customizable components for building modern web applications. It is designed to be easy to use and integrate, offering a consistent and polished look and feel.
Form Components
Element Plus provides a variety of form components such as input fields, buttons, and form containers. This example demonstrates a simple login form with username and password fields.
<template>
<el-form :model="form">
<el-form-item label="Username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="Password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Submit</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
}
};
},
methods: {
onSubmit() {
console.log('Form submitted:', this.form);
}
}
};
</script>
Data Display
Element Plus offers data display components like tables, which can be used to present data in a structured format. This example shows a simple table with columns for date, name, and address.
<template>
<el-table :data="tableData">
<el-table-column prop="date" label="Date" width="180"></el-table-column>
<el-table-column prop="name" label="Name" width="180"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2016-05-02', name: 'John Smith', address: 'No. 1, Lake Park' },
{ date: '2016-05-04', name: 'Jane Doe', address: 'No. 2, Lake Park' }
]
};
}
};
</script>
Navigation
Element Plus includes navigation components such as menus, which can be used to create navigational structures for your application. This example demonstrates a horizontal menu with three items.
<template>
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">Home</el-menu-item>
<el-menu-item index="2">About</el-menu-item>
<el-menu-item index="3">Contact</el-menu-item>
</el-menu>
</template>
<script>
export default {
data() {
return {
activeIndex: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log('Selected menu item:', key);
}
}
};
</script>
Vuetify is a popular Vue.js UI library that follows the Material Design guidelines. It offers a wide range of components and is known for its comprehensive documentation and ease of use. Compared to Element Plus, Vuetify has a more modern design aesthetic and a larger community.
Ant Design Vue is a Vue.js implementation of the Ant Design system, which is widely used in enterprise applications. It provides a set of high-quality components and design guidelines. Compared to Element Plus, Ant Design Vue is more focused on enterprise-level applications and offers a more professional look and feel.
Bootstrap Vue brings the power of Bootstrap to Vue.js. It provides a wide range of Bootstrap-styled components and utilities. Compared to Element Plus, Bootstrap Vue is more aligned with the Bootstrap framework and is ideal for developers who are already familiar with Bootstrap.
Element Plus - A Vue.js 3 UI library
Alright, for you to get started if you are looking for making Element Plus better you should keep reading. For developers that uses Element Plus to develop your website you should go ahead visit Getting Started
The first stable release of Element Plus suitable for use in production was released on Febuary 07, 2022. The APIs is stable right now, and here's also a full list about how to get upgraded from Element UI to Element Plus.
You can find the breaking change list here: Breaking Change List.
We have made a migration tool for you to migrate your project from Element UI to Element Plus.
You can find the gogo code migration tool here.
We have tested this on Vue Element Admin. You can find the transpiled code here
You can also try Element Plus out with the components built-in playground (This thing is still under development, most of the functions are ready)
Special thanks to the generous sponsorship by:
|
|
|
|
|
Element Plus is translated to multiple languages, you can click the badge to help up update the translation or apply to become
a proofreader 
For now we are only showing English and Chinese for resource reasons, but we are looking forward to translate it into more languages, please go to the link above and leave a message if you want to help translating Element Plus into your desired language.
Join our Discord to start communicating with everybody.
Awesommmmmmee. Everything you need is down below. You can also refer to CONTRIBUTING and Code of Conduct where you'll find the same information listed below.
Welcome :star_struck:! We are looking for talented developers to join us and making Element Plus better! If you care to join the development team, please reach out to us, you are more than welcomed to join us! :heart:
We are now lacking of experts of Testing, GitHub Actions, PM, if you do feel like you can and willing to help us, please do reach out to us. :pray:
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. Become a sponsor
This project exists thanks to all the people who contribute.
And thank you to all our backers! 🙏
Element Plus is open source software licensed as MIT.
FAQs
A Component Library for Vue 3
We found that element-plus demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.