--- title: Installation lang: en-US --- # Installation ## Compatibility ^(2.5.0) Element Plus can run on browsers that support last 2 versions. If you really need to support outdated browsers, please add [Babel](https://babeljs.io/) and Polyfill yourself. Since Vue 3 no longer supports IE11, Element Plus does not support IE either. | version | ![Chrome](https://cdn.jsdelivr.net/npm/@browser-logos/chrome/chrome_32x32.png)
Chrome | ![IE](https://cdn.jsdelivr.net/npm/@browser-logos/edge/edge_32x32.png)
Edge | ![Firefox](https://cdn.jsdelivr.net/npm/@browser-logos/firefox/firefox_32x32.png)
Firefox | ![Safari](https://cdn.jsdelivr.net/npm/@browser-logos/safari/safari_32x32.png)
Safari | | ------- | ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | | < 2.5.0 | Chrome ≥ 64 | Edge ≥ 79 | Firefox ≥ 78 | Safari ≥ 12 | | 2.5.0 + | Chrome ≥ 85 | Edge ≥ 85 | Firefox ≥ 79 | Safari ≥ 14.1 | ### Sass Version `2.8.5` and later, the minimum compatible version of [Sass](https://github.com/sass) is `1.79.0`. If your terminal prompts `legacy JS API Deprecation Warning`, you can configure the following code in [vite.config.ts](https://vitejs.dev/config/shared-options.html#css-preprocessoroptions). ```ts{3} css: { preprocessorOptions: { scss: { api: 'modern-compiler' }, } } ``` ### Version Element Plus is currently in a rapid development iteration. [![ElementPlus version badge](https://img.shields.io/npm/v/element-plus.svg?style=flat-square)](https://www.npmjs.org/package/element-plus) In addition, every commit and PR on the dev branch will be published to [pkg.pr.new](https://github.com/stackblitz-labs/pkg.pr.new), if you want to use some unpublished content, you can refer to [here](https://github.com/element-plus/element-plus/issues/18433#issuecomment-2392618431). ## Using Package Manager **We recommend using the package manager (NPM, [Yarn](https://classic.yarnpkg.com/lang/en/), [pnpm](https://pnpm.io/)) to install Element Plus**, so that you can utilize bundlers like [Vite](https://vitejs.dev) and [webpack](https://webpack.js.org/). Choose a package manager you like. ::: code-group ```shell [npm] $ npm install element-plus --save ``` ```shell [yarn] $ yarn add element-plus ``` ```shell [pnpm] $ pnpm install element-plus ``` ::: If your network environment is not good, it is recommended to use a mirror registry [cnpm](https://github.com/cnpm/cnpm) or [npmmirror](https://npmmirror.com/). ```shell npm config set registry https://registry.npmmirror.com ``` ## Import in Browser Import Element Plus through browser HTML tags directly, and use global variable `ElementPlus`. According to different CDN providers, there are different introduction methods. Here we use [unpkg](https://unpkg.com) and [jsDelivr](https://jsdelivr.com) as example. You can also use other CDN providers. ### unpkg ```html ``` ### jsDelivr ```html ``` :::tip We recommend using CDN to import Element Plus users to lock the version on the link address, so as not to be affected by incompatible updates when Element Plus is upgraded in the future. Please check [unpkg.com](https://unpkg.com) for the method to lock the version. Due to the limitations of native HTML parsing behavior, single-closed tags may cause some exceptions, so please use double-closed tags, [reference](https://vuejs.org/guide/essentials/component-basics.html#in-dom-template-parsing-caveats) ```html ``` ::: ## Hello World With CDN, we can easily use Element Plus to write a Hello World page. [Online Demo](https://codepen.io/iamkun/pen/YzWMaVr) If you are installing via package manager and want to use it with a packaging tool, please read the next section: [Quick Start](/en-US/guide/quickstart).