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.0 UI library

• 💪 Vue 3.0 Composition API
• 🔥 Written in TypeScript

This project is still under heavy development. Feel free to join us and make your first pull request.

---

Join our Discord to start communicating with everybody.

Bootstrap project

With command

$ yarn bootstrap

the project will install all dependencies and run lerna bootstrap to initialize the project

Website preview

With command

$ yarn website-dev

the project will launch website for you to preview all existing component

You can also use this command to start a blank page to debug

$ yarn website-dev:play
//source file: ./website/play/index.vue

Component migration process

1. Convert the item in https://github.com/element-plus/element-plus/projects/1 to an issue
2. Assign yourself to the issue
3. Author your component by generating new component command below
4. Migrate tests and docs
5. Open a new pull request, fill in the component issue link in 1

Generate new component

With command

$ yarn gen component-name

Note the component-name must be in kebab-case, combining words by replacing each space with a dash.

Commit template

With command

yarn cz

Example

[TYPE](SCOPE):DESCRIPTION#[ISSUE]
# example feat(button):add type 'button' for form usage #1234