Convert Figma logo to code with AI

element-plus logoelement-plus

🎉 A Vue.js 3 UI Library made by Element team

24,786
17,010
24,786
1,876

Top Related Projects

39,994

🐉 Vue Component Framework

26,050

Quasar Framework - Build high-performance VueJS user interfaces in record time

🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜

54,165

A Vue.js 2.0 UI Toolkit for Web

9,577

Lightweight UI components for Vue.js based on Bulma

Quick Overview

Element Plus is a Vue 3 based component library for developers, designers and product managers. It provides a rich selection of customizable and feature-packed UI components, making it easier to build consistent and attractive user interfaces for web applications.

Pros

  • Comprehensive set of UI components with extensive customization options
  • Built specifically for Vue 3, taking advantage of its performance improvements and new features
  • Well-documented with detailed API references and examples
  • Active community and regular updates

Cons

  • Learning curve for developers new to Vue or component libraries
  • Large bundle size if importing the entire library (though tree-shaking is supported)
  • Some components may have limited functionality compared to more specialized alternatives
  • Styling customization can be complex for highly custom designs

Code Examples

  1. Basic Button Usage:
<template>
  <el-button type="primary">Primary Button</el-button>
  <el-button type="success">Success Button</el-button>
  <el-button type="danger">Danger Button</el-button>
</template>
  1. Form with Validation:
<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="Name" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(formRef)">Submit</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'

const formRef = ref()
const form = reactive({
  name: ''
})
const rules = {
  name: [{ required: true, message: 'Please input name', trigger: 'blur' }]
}

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      ElMessage.success('Submit!')
    } else {
      ElMessage.error('Error submit!')
    }
  })
}
</script>
  1. Data Table:
<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script setup>
const tableData = [
  {
    date: '2023-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2023-05-02',
    name: 'John',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

Getting Started

  1. Install Element Plus:
npm install element-plus
  1. Import and use in your Vue 3 project:
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
  1. Use components in your Vue templates:
<template>
  <el-button type="primary">Hello Element Plus</el-button>
</template>

Competitor Comparisons

39,994

🐉 Vue Component Framework

Pros of Vuetify

  • Larger community and ecosystem, with more third-party components and resources
  • More comprehensive documentation and examples
  • Better support for Material Design out of the box

Cons of Vuetify

  • Heavier bundle size, which may impact performance for smaller projects
  • Less flexibility in customizing styles, as it's more opinionated about design

Code Comparison

Element Plus:

<el-button type="primary">Primary Button</el-button>
<el-input v-model="input" placeholder="Please input"></el-input>
<el-select v-model="value" placeholder="Select">
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

Vuetify:

<v-btn color="primary">Primary Button</v-btn>
<v-text-field v-model="input" label="Please input"></v-text-field>
<v-select v-model="value" :items="options" label="Select"></v-select>

Both Element Plus and Vuetify are popular Vue.js UI component libraries, offering a wide range of pre-built components for rapid application development. Element Plus focuses on providing a clean, minimalist design with high customizability, while Vuetify emphasizes Material Design principles and offers a more opinionated approach to styling. The choice between the two often depends on project requirements, design preferences, and performance considerations.

26,050

Quasar Framework - Build high-performance VueJS user interfaces in record time

Pros of Quasar

  • Cross-platform development: Supports web, mobile, and desktop applications
  • Rich ecosystem: Includes CLI, dev tools, and extensive component library
  • Performance-focused: Optimized for speed and efficiency

Cons of Quasar

  • Steeper learning curve: More complex due to its comprehensive nature
  • Opinionated framework: Less flexibility in project structure and setup
  • Larger bundle size: Can be heavier than Element Plus for simpler projects

Code Comparison

Element Plus (Vue 3):

<template>
  <el-button type="primary">Primary Button</el-button>
</template>

<script>
import { ElButton } from 'element-plus'
</script>

Quasar (Vue 3):

<template>
  <q-btn color="primary" label="Primary Button" />
</template>

<script>
import { QBtn } from 'quasar'
</script>

Both frameworks offer component-based development for Vue applications. Element Plus focuses on providing a comprehensive UI library for web applications, while Quasar extends its reach to multiple platforms. Quasar's syntax is often more concise, but Element Plus may be easier to integrate into existing Vue projects. The choice between them depends on project requirements, target platforms, and developer preferences.

🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜

Pros of Ant Design Vue

  • More comprehensive component library with a wider range of UI elements
  • Stronger integration with the Ant Design ecosystem and design principles
  • Better internationalization support out of the box

Cons of Ant Design Vue

  • Steeper learning curve due to more complex API and configuration options
  • Larger bundle size, which may impact initial load times
  • Less flexibility in customizing component styles without overriding defaults

Code Comparison

Ant Design Vue:

<template>
  <a-button type="primary" @click="handleClick">
    Click me
  </a-button>
</template>

<script>
import { Button } from 'ant-design-vue';

export default {
  components: {
    AButton: Button,
  },
  methods: {
    handleClick() {
      console.log('Button clicked');
    },
  },
};
</script>

Element Plus:

<template>
  <el-button type="primary" @click="handleClick">
    Click me
  </el-button>
</template>

<script>
import { ElButton } from 'element-plus';

export default {
  components: {
    ElButton,
  },
  methods: {
    handleClick() {
      console.log('Button clicked');
    },
  },
};
</script>

Both libraries offer similar component usage, but Ant Design Vue typically requires more configuration and has a more extensive API. Element Plus generally provides a simpler, more straightforward approach to component implementation.

54,165

A Vue.js 2.0 UI Toolkit for Web

Pros of Element

  • More mature and stable, with a longer development history
  • Larger community and ecosystem, resulting in more third-party resources
  • Better documentation and examples for Vue 2.x projects

Cons of Element

  • Limited support for Vue 3 and Composition API
  • Slower release cycle and less frequent updates
  • Heavier bundle size due to older architecture

Code Comparison

Element (Vue 2.x):

<template>
  <el-button @click="handleClick">Click me</el-button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked')
    }
  }
}
</script>

Element Plus (Vue 3.x):

<template>
  <el-button @click="handleClick">Click me</el-button>
</template>

<script setup>
const handleClick = () => {
  console.log('Button clicked')
}
</script>

Element Plus is a Vue 3 compatible version of Element, offering improved performance, better TypeScript support, and Composition API compatibility. It features a more modern codebase, faster development cycle, and smaller bundle size. However, Element has a larger existing user base and more comprehensive documentation for Vue 2.x projects. The code comparison shows the difference in syntax between Vue 2.x and Vue 3.x, with Element Plus utilizing the Composition API and <script setup> for a more concise implementation.

9,577

Lightweight UI components for Vue.js based on Bulma

Pros of Buefy

  • Lightweight and simple to use, with a smaller bundle size
  • Built on top of Bulma CSS framework, offering a clean and modern design
  • Easier learning curve for developers familiar with Bulma

Cons of Buefy

  • Smaller community and fewer contributors compared to Element Plus
  • Less frequent updates and potentially slower bug fixes
  • More limited set of components and features

Code Comparison

Element Plus (Vue 3):

<template>
  <el-button type="primary">Primary Button</el-button>
</template>

<script setup>
import { ElButton } from 'element-plus'
</script>

Buefy (Vue 2):

<template>
  <b-button type="is-primary">Primary Button</b-button>
</template>

<script>
export default {
  // No additional setup required
}
</script>

Both Element Plus and Buefy are popular UI component libraries for Vue.js applications. Element Plus is a more comprehensive library with a larger set of components and features, while Buefy offers a simpler, lightweight alternative built on top of the Bulma CSS framework. Element Plus has a larger community and more frequent updates, but Buefy may be easier to learn for developers already familiar with Bulma. The choice between the two depends on project requirements, team expertise, and desired design aesthetics.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

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

Edit element-plus

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 Crowdin

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.

NPM DownloadsLast 30 Days