Skip to content
Get packs

Guide · Open source

How to use Element Plus: install and build Vue 3 apps

Updated · written with AI from the project's own documentation and checked against our catalogue data

Element Plus is a UI component library for Vue.js 3. It gives you prebuilt interface elements such as buttons and forms that you can add to a web app, and it is written in TypeScript. This guide explains what it is, what you need before starting, where to find the official getting started docs, and how to try it, so you can decide whether it fits your project.

Element Pluselement-plus/element-plus · ★ 27.8k · MIT

Quick start

  1. 1Check the prerequisites. Confirm you have Node.js 20 or newer and a Vue 3 project.
  2. 2Open the getting started guide. Go to https://element-plus.org and follow the Getting Started steps for your project.
  3. 3Try components in the playground. Use the built-in playground at element-plus.run to test components before coding.
  4. 4Add components to your app. Install the package and use its prebuilt components such as buttons and forms in your Vue 3 pages.
  5. 5Migrate if needed. If you are coming from Element UI, read the Breaking Change List and consider the gogocode migration tool.

What is Element Plus and who is it for?

Element Plus is a library of ready-made interface components for Vue.js 3. It uses the Vue 3 Composition API and is written in TypeScript. It is the Vue 3 successor to Element UI, made by the Element team.

It suits developers building admin panels or business web apps with Vue 3, teams migrating from Element UI to Vue 3, and projects that want TypeScript support in their UI components. It is a library for building apps, so it is not a finished website you can use without coding.

  • Good fit: admin panels and business web apps built with Vue 3
  • Good fit: teams moving from Element UI to Vue 3
  • Not a fit: projects not using Vue.js, or projects that need a Vue 2 library

What you need before you install Element Plus

You need Vue.js 3 in your project and Node.js 20 or newer. The library is a package for a Vue 3 app, so the app itself must be a Vue 3 project.

  • Node.js 20 or newer
  • A Vue 3 project
  • Basic familiarity with Vue and a package manager

Install Element Plus with a package manager

Element Plus is installed as an npm package, which the project's README lists as the install method. The official getting started guide on the Element Plus homepage has the full setup steps for building a website with it.

Open the getting started guide at https://element-plus.org for the install steps that apply to your project.

  • Check your Node.js version is 20 or newer
  • Follow the official Getting Started guide at element-plus.org to add the package to your Vue 3 project

Try Element Plus in the browser first

If you want to test components before setting up a project, the README links to a built-in component playground and a CodeSandbox example. These let you see components working without any local setup.

  • Built-in playground: https://element-plus.run/
  • CodeSandbox example: https://codesandbox.io/p/github/element-plus/element-plus-demo/main

Migrate from Element UI to Element Plus

If you already use Element UI, the README points to a breaking change list that explains how to upgrade. The Element Plus team also made a migration tool that converts Element UI code.

The first stable release suitable for production was released on February 7, 2022, and the API is now stable. The migration tool was tested on Vue Element Admin.

  • Read the Breaking Change List in the project's GitHub discussions
  • Try the gogocode migration tool from the gogocode-plugin-element package
  • Review the transpiled Vue Element Admin example

Contribute to Element Plus (for developers)

If you want to fix bugs or improve the library itself, clone the repository. The README gives this command for contributors. Read CONTRIBUTING and the Code of Conduct before you open a pull request.

The team is also looking for people with experience in Testing, GitHub Actions and PM.

  • Read CONTRIBUTING.md and CODE_OF_CONDUCT.md in the repository
  • Join the Discord to talk with other users and contributors
git clone https://github.com/element-plus/element-plus

What people use it for

  • Building admin panels with forms and tables in Vue 3
  • Adding typed UI components to a TypeScript business web app
  • Moving an existing Element UI project to Vue 3

Frequently asked questions

Is Element Plus free to use?

Element Plus is open source software licensed under the MIT License. The license is linked from the project's README, which is the source for this page.

What do I need to install Element Plus?

You need Node.js 20 or newer and a Vue.js 3 project. Element Plus is for Vue 3 only.

Does Element Plus work with Vue 2?

No. The README targets Vue 3 and points Element UI users to a migration path instead of a Vue 2 version.

Is Element Plus the same as Element UI?

No. Element Plus is the Vue 3 successor to Element UI, made by the same Element team. The README links a breaking change list for upgrading.

Can I try Element Plus without installing it?

Yes. The README links a built-in playground at element-plus.run and a CodeSandbox example.

What are alternatives to Element Plus?

The project lists Vuetify, PrimeVue, Naive UI and Quasar as comparable projects. This guide does not compare their features.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Element Plus suits developers building admin panels or business apps with Vue 3 who want TypeScript support. If you do not use Vue, need Vue 2, or want a finished website without coding, pick a different option.

Install options & downloads