Master all four elements to save your Vue apps

Live in harmony with Element, a Vue 2.0 based desktop UI library

Jane Elizabeth
© Shutterstock / Production Perig

Are your apps missing something fundamental? Element is a Vue 2.0-based component library aimed at giving developers consistency, efficiency, controlled consequences, and lots of operation feedback. Elements is logically sound, reasonably structured, and easy to use.

The four classical elements of water, earth, fire, and air might not be enough to solve your Vue problems. But, seeing as the periodic table is up to 118, that might be far too much to handle as well. Instead, save your apps with Element, a desktop library for Vue.

This component library aims to help developers by focusing on consistency, efficiency, controllability, and useful feedback. A harmonious, simple process ensures that decision making is optimized for developers. After all, developers can make better choices when they can see how different iterations run; that’s where the feedback comes in handy.

Element was originally developed in Chinese, so non-Mandarin speaking developers will have to do some basic internationalization to get started. Don’t worry, we’ve got you covered. One simple plugin and you can rock the elements in any language you choose.

Element offers a customizable build to fit every developer’s preferences. Developers can change the theme colors, either by updating the SCSS variables or even in the CLI theme tool. It also offers a number of built in transitions, such as fade, zoom, and collapse on demand.

As for the nuts and bolts of the Element library, it contains pretty much everything that a developer would need for their Vue projects. Basic components, forms, data, notices, navigation, and more are all available; see the thorough user’s guide for more information about the different components.

SEE MORE: Create your first app with Vue.js

Getting the right Element

Want to try out Element? There’s a free online demo available here for developers to explore. (Fair warning, there is some Mandarin on the page but it doesn’t interfere with the coding.)

This library is open source and available here. Installation with npm and webpack is recommended. You can also get the latest version from CDN. Element is a work in progress, so more resources are being developed.


long ago, the four nations lived in harmony. everything changed when the fire nation attacked.

Jane Elizabeth
Jane Elizabeth is an assistant editor for

1 Comment
Inline Feedbacks
View all comments
Sri k
Sri k
3 years ago

Read the first line and skipped the article.
There are five essential elements, you missed space!