Skip to content
Get packs

Guide · Open source

How to use Element UI: install and build Vue 2 pages

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

Element is a UI toolkit for Vue.js 2.0 that gives you prebuilt components such as buttons and selects, so you can build consistent web pages and admin-style interfaces without designing every control yourself. This guide shows how to install the package, register components in a Vue 2 project, and decide whether Element fits your project. Its README says the library stays on Vue 2.x, so it is aimed mainly at existing Vue 2 applications.

ElementElemeFE/element · ★ 54k · MIT

Quick start

  1. 1Confirm your project is Vue 2.x. Element targets Vue.js 2.0. If your project uses Vue 3, the README recommends Element Plus instead.
  2. 2Install the package. Run npm install element-ui -S in your project folder.
  3. 3Register Element. Import Element and call Vue.use(Element) to register the full library, or import only the components you need.
  4. 4Use a component in a template. Add a registered component such as el-button or el-select to your Vue template and check the documentation for its props.
  5. 5Customise the theme if needed. Follow the custom theme guide in the documentation, or use the online theme preview linked from the README.

Check that Element fits your project

Element is a good match if you maintain an existing Vue.js 2.x web application, or you are building an internal admin or back-office interface with Vue 2. It also suits teams that want prebuilt components with a documented API and themes, and projects that must support Internet Explorer 10+ alongside modern browsers.

  • Use it for: existing Vue 2.x apps and Vue 2 admin or back-office tools
  • Look elsewhere for: new Vue 3 projects, since the README recommends Element Plus for Vue 3
  • Look elsewhere for: mini-program development, where the README recommends MorJS
  • Look elsewhere for: visual design tools, because Element provides code components

Install Element with npm

You need a Vue.js 2.x project and Node.js with npm. The README does not state a required Node.js version. Run the install command from your project folder to add the element-ui package.

npm install element-ui -S

Register Element in your Vue app

You can load the whole library at once or import only the components you need. The quick start shows both options. Full registration uses Vue.use(Element). Selective registration imports named components and registers each with Vue.component, using the component's name property.

For more detail, the README links to the Quick Start in the official documentation.

  • Full library: import Element from 'element-ui' and call Vue.use(Element)
  • Selective: import { Select, Button } from 'element-ui' and call Vue.component(Button.name, Button) for each
import Vue from 'vue' import Element from 'element-ui' Vue.use(Element) // or import { Select, Button // ... } from 'element-ui' Vue.component(Select.name, Select) Vue.component(Button.name, Button)

Use the documentation and themes

The homepage at element.eleme.io hosts the documentation, with versions in English, Chinese, Spanish and French. The README also links to a guide on customising the theme and an online theme preview and generator.

Community resources listed in the README include an awesome-element list, a FAQ.md file in the repository, and starter kits such as element-starter.

  • Docs: https://element.eleme.io/
  • Customise the theme: see the custom theme page linked from the README
  • Before reporting an issue, search the FAQ.md file in the repository

Know the browser support and licence

The README states support for modern browsers and Internet Explorer 10+. Element is released under the MIT licence, as shown in the LICENSE file linked from the README.

What people use it for

  • Building an internal admin dashboard in a Vue 2 application
  • Maintaining a legacy Vue 2.x web app that needs consistent buttons and selects
  • Creating back-office forms that must also work in Internet Explorer 10
  • Starting from an element-starter kit to bootstrap a Vue 2 project

Frequently asked questions

Is Element free to use?

Yes. Element is released under the MIT licence, as stated in the README and the LICENSE file. You can read the licence file in the repository to confirm the terms.

How do I install Element UI?

Run npm install element-ui -S in a Vue.js 2.x project. Then import Element from element-ui and call Vue.use(Element) in your main entry file.

Does Element UI work with Vue 3?

The README says Element will stay with Vue 2.x. For Vue 3 it recommends Element Plus, a community project.

What browsers does Element support?

The README lists modern browsers and Internet Explorer 10 and above.

What are the alternatives to Element UI?

Projects commonly compared with Element include Element Plus, Vuetify, Ant Design Vue and BootstrapVue. Element Plus is the one the README recommends for Vue 3.

Where can I get help if something breaks?

Check the FAQ.md file in the repository first, as the README asks. The README also links to a Gitter chat and a DingTalk discussion group.

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 is a practical choice if you maintain a Vue 2.x application or build admin interfaces on Vue 2 and need prebuilt components with documentation and themes. If you start a new project on Vue 3, the README points you to Element Plus, and mini-program work should use MorJS.

Install options & downloads