The official version of Element Plus is released! 🎉🎉

Today, we are very excited to announce the official release of Element Plus Stable. Since the first commit, after 1 year and 7 months of continuous iterative development, a total of 2635 commits, 2494 PRs, 137 Alpha and Beta versions submitted by 256 contributors, every student in the community participated With the help, the first official version of Element Plus finally meets everyone.

Major update

TypeScript and Vue 3

Element Plus is developed with TypeScript and Vue 3.2 and provides a complete type definition file. And use the Composition API to reduce coupling and simplify logic.

compatibility

Since Vue 3 is no longer compatible with IE, Element Plus has also raised the minimum compatible version.

Edge ≥ 79	Firefox ≥ 78	Chrome ≥ 64	Safari ≥ 12

If you want to use Element Plus normally on lower version browsers, please use Babel, ESBuild or other conversion tools and introduce corresponding polyfills.
It is worth noting that Element Plus uses ResizeObserver. If you need compatibility, you need to introduce resize-observer-polyfill . See Compatibility for ResizeObserver for details.

ESM and CJS

Element Plus supports both ESM, CJS and UMD formats. Under normal circumstances, you don't need to pay attention to the imported format. The build tool will automatically match and convert it into the target format. At the same time, no additional configuration is required, and it supports on-demand loading capabilities.

design

The component size system is switched from default/medium/small/mini to the more natural large/default/small , which is based on default . If you need to increase it, choose large . If you need to reduce it, choose small .

The padding aspect is optimized to a more general 4px system, using 4/8 px as the atomic unit to control the padding consistency of the entire system. That is, the padding of large components is also large, and the padding of small components is also small. For details, please refer size modification note .

icon

In order to use the built-in icons in Element Plus, users often need to refer to a font file of ~75KB and an additional network request, which is completely unnecessary overhead in most cases. Users who are very concerned about the size and loading speed of the home page come That said, this is a long-term pain point.

Therefore, we changed all Font Icons to Inline Vue SVG components , which means that all components are placed in the same request along with your packaging code, so that no additional network requests will be generated to request fonts file, it will not bring small squares that the font cannot be rendered due to the failure of the network request, and the clarity of the icon will be better.

You can download older versions of font files to keep older projects compatible.

• unpkg.com/element-plus@1.1.0-beta.24/theme-chalk/base.css
• unpkg.com/browse/element-plus@1.1.0-beta.24/theme-chalk/fonts

configure

Element Plus adds a new global configuration management component config-provider to replace the Element UI global configuration Vue.prototype.$ELEMENT .
You can perform global configuration in the following two ways.

// 方式一 main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'

createApp(App).use(ElementPlus, { size: 'small' }).mount('#app')

// 方式二 APP.vue
<template>
  <el-config-provider :size="small">
    <el-button>Button</el-button>
  </el-config-provider>
</template>

For more details on API changes, see Element Plus Incompatible Changes and Upgrades Guide .

New Components and Design Resources

After migrating the existing components, four new components, Space , Skeleton , Empty and Affix , have been added to the official version to enrich developers' choices. And added the Select-V2 component that uses virtual scrolling to optimize the display performance of long lists.

At the same time, we also made and uploaded the latest Figma design resource file containing all component information, which is convenient for product managers and designers to use.

The release of the official version means the end of the overall migration and adaptation work, and the API design is basically stable, but this is just the beginning. In subsequent iterations, we will focus on optimizing interaction details and adding additional features, including but not limited to the following:

dark theme

In the official version, we have integrated the new capabilities of CSS Variables , which will be more convenient and perform better than the previous SASS variable configuration mode. On the basis of this set of capabilities, we are intensively developing the dark theme, and we will meet you in subsequent versions soon.

High performance table component

At the time of the beta release, we mentioned providing tables that use virtualization capabilities to optimize the performance of the Table component in the case of large data volumes. However, this part of the function is not included in the official version release, but will be added in subsequent iterations. A large part of the reason why this function has not been implemented is that we have been exploring which method is more suitable for users. Either we directly add the virtualized table rendering engine, or we provide a rendering interface for users to add virtualized components (components like vue-virtual-scroller) to render by themselves. In the future, we will refer to the implementation of related components on the market and provide a set of solutions to make the Table component of Element Plus easier to use.

Related ecology

• Element Plus Icons - A collection of Element Plus icons.
• Element Plus Playground - You can try it by clicking here ! 😆
• Element Plus Vite Starter - Vite Quick Start Template.
• unplugin-element-plus - Element Plus on-demand loading style plugin.
• Design Materials - Logos, memes, and other resources for the Element Plus community.
• awesome-element-plus - List of Element Plus related libraries, templates and resources.