element-plus

What is element-plus?

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.

What are element-plus's main functionalities?

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>

Other packages similar to element-plus

vuetify

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

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

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.

README

Element Plus - A Vue.js 3 UI library

• 💪 Vue 3 Composition API
• 🔥 Written in TypeScript

Getting Started

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.

• 中国大陆加速镜像站点

Breaking change list

The first stable release of Element Plus suitable for use in production was released on February 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.

Migration Tool :hammer_and_wrench:

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.

Playground

You can also try Element Plus out with the components built-in playground.

Try it with our built-in playground

Playground

Try it with code sandbox

Special thanks to the generous sponsorship by:

Platinum Sponsors

Gold Sponsors

---

Translations

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.

How to help translating

See how to help translating in Translating Element Plus.

Stay tuned :eyes:

Join our Discord to start communicating with everybody.

This thing is broken, I should help improve it!

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.

I would like to become a part of the development team!

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:

Contributors

This project exists thanks to all the people who contribute.

And thank you to all our backers! 🙏

License

Element Plus is open source software licensed as MIT.