Element Plus

Language: JavaScript

UI Framework

Element Plus is the Vue 3 version of the popular Element UI library. It was created to provide developers with a comprehensive and easy-to-use suite of UI components, following consistent design principles and best practices. It focuses on productivity and flexibility for enterprise applications.

Element Plus is a Vue 3 UI component library that provides a rich set of high-quality, reusable components for building modern web applications with a clean design aesthetic.

Installation

npm: npm install element-plus --save

yarn: yarn add element-plus

cdn: https://unpkg.com/element-plus/dist/index.full.js

manual: Include the Element Plus components and CSS in your Vue 3 project and configure the plugin in main.js or main.ts.

Usage

Element Plus provides Vue components for forms, buttons, tables, modals, notifications, navigation, and more. Components are fully customizable and support reactive data binding, events, and slots.

Button usage

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

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

Shows a primary styled button using Element Plus `el-button` component.

Input component

<template>
  <el-input v-model="inputText" placeholder="Enter text"></el-input>
</template>

<script setup>
import { ref } from 'vue'
import { ElInput } from 'element-plus'
const inputText = ref('')
</script>

Uses `el-input` with Vue 3 reactive binding to capture user input.

Dialog component

<template>
  <el-dialog title="Dialog Title" :visible.sync="dialogVisible">
    <p>Dialog content goes here.</p>
    <span slot="footer">
      <el-button @click="dialogVisible = false">Close</el-button>
    </span>
  </el-dialog>
  <el-button @click="dialogVisible = true">Open Dialog</el-button>
</template>

<script setup>
import { ref } from 'vue'
import { ElDialog, ElButton } from 'element-plus'
const dialogVisible = ref(false)
</script>

Demonstrates opening and closing a modal dialog with a button using Element Plus components.

Table component

<template>
  <el-table :data="tableData" style="width: 100%">
    <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 setup>
import { ref } from 'vue'
import { ElTable, ElTableColumn } from 'element-plus'
const tableData = ref([
  { date: '2025-08-01', name: 'John Doe', address: '123 Street' },
  { date: '2025-08-02', name: 'Jane Smith', address: '456 Avenue' }
])
</script>

Displays a simple table with rows and columns using Element Plus `el-table` and `el-table-column` components.

Notification

<script setup>
import { ElNotification } from 'element-plus'
function notify() {
  ElNotification({
    title: 'Success',
    message: 'This is a notification',
    type: 'success'
  })
}
</script>
<template>
  <el-button @click="notify">Show Notification</el-button>
</template>

Shows a notification message using Element Plus `ElNotification` API.

Error Handling

Component not styled: Ensure you import Element Plus CSS: `import 'element-plus/dist/index.css'` in your main.js or main.ts.

Component not rendered: Make sure the component is properly imported and registered in your Vue project.

Two-way binding not working: Check that you are using `v-model` with a reactive variable (`ref` or `reactive`).

Best Practices

Import only the components you need to reduce bundle size.

Use reactive Vue 3 state management with `ref` or `reactive` for component bindings.

Leverage slots and props for customizing component content and behavior.

Combine Element Plus with global theming to maintain consistent application design.

Use Element Plus plugins (like notification, message, loading) for common UI interactions.

Official Docs Github