{"id":10782,"library":"element-plus","title":"Element Plus","description":"Element Plus is a comprehensive UI component library for Vue 3, built entirely with the Composition API and TypeScript. It offers a rich set of customizable components designed to streamline development of web applications. The library is currently at version 2.13.7 and maintains a frequent release cadence, often releasing multiple patch versions per month to address bugs and introduce minor features, with occasional minor versions for larger feature sets. Key differentiators include its strong TypeScript support, native Vue 3 reactivity, and an extensive ecosystem of tools and documentation, making it a robust alternative to older Vue 2 UI libraries like Element UI.","status":"active","version":"2.13.7","language":"javascript","source_language":"en","source_url":"https://github.com/element-plus/element-plus","tags":["javascript","element-plus","element","component library","ui framework","ui","vue","typescript"],"install":[{"cmd":"npm install element-plus","lang":"bash","label":"npm"},{"cmd":"yarn add element-plus","lang":"bash","label":"yarn"},{"cmd":"pnpm add element-plus","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Element Plus is a UI component library built for Vue 3 applications.","package":"vue","optional":false}],"imports":[{"note":"For global registration with `app.use(ElementPlus);`. Element Plus is ESM-first and not designed for CommonJS `require` in modern Vue 3 setups.","wrong":"const ElementPlus = require('element-plus');","symbol":"ElementPlus (global install)","correct":"import ElementPlus from 'element-plus';"},{"note":"All components are named exports prefixed with `El`. Direct imports are tree-shakable. Using older `lib/` paths is deprecated.","wrong":"import ElButton from 'element-plus/lib/ElButton';","symbol":"ElButton (specific component)","correct":"import { ElButton } from 'element-plus';"},{"note":"Essential for applying the default Element Plus theme and styling. The `dist/index.css` path is the current standard; older `lib/theme-chalk/` paths may be outdated.","wrong":"import 'element-plus/lib/theme-chalk/index.css';","symbol":"Element Plus CSS","correct":"import 'element-plus/dist/index.css';"},{"note":"Useful for type-checking component refs (e.g., `const buttonRef = ref(null);`) or other component-related types.","symbol":"ButtonInstance (type)","correct":"import type { ButtonInstance } from 'element-plus';"}],"quickstart":{"code":"import { createApp, ref } from 'vue';\nimport ElementPlus from 'element-plus';\nimport 'element-plus/dist/index.css';\nimport { ElMessage } from 'element-plus'; // For programmatic use\n\nconst App = {\n setup() {\n const inputValue = ref('');\n const message = ref('Hello Element Plus!');\n\n const showFeedback = () => {\n ElMessage.success('Button clicked!');\n };\n\n return {\n inputValue,\n message,\n showFeedback\n };\n },\n template: `\n
\n

{{ message }}

\n Click Me\n \n

You typed: {{ inputValue }}

\n Documentation\n
\n `\n};\n\nconst app = createApp(App);\napp.use(ElementPlus);\napp.mount('#app');","lang":"typescript","description":"This quickstart demonstrates setting up a basic Vue 3 application with Element Plus, globally installing the library, importing its styles, and using several core components like ElButton, ElInput, and ElLink, along with programmatic usage of ElMessage."},"warnings":[{"fix":"Refer to the official 'Breaking Change List' discussion on GitHub and consider using the 'gogocode migration tool' to assist with project migration from Element UI to Element Plus.","message":"Migrating from Element UI (Vue 2) to Element Plus (Vue 3) involves significant breaking changes due to the underlying Vue version upgrade and API redesign. A dedicated migration tool and detailed breaking change list are available.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure your Node.js environment is updated to version 20 or later. Use a Node.js version manager like `nvm` to easily switch between versions (`nvm install 20 && nvm use 20`).","message":"Element Plus requires Node.js version 20 or higher for development environments. Older Node.js versions may lead to build errors or unexpected behavior.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Upgrade your project's Vue dependency to `^3.5.0` to ensure optimal compatibility with Element Plus versions 2.13.0 and newer. Update your `package.json` and run `npm install` or `yarn install`.","message":"Starting with version 2.13.0, Element Plus officially supports and recommends Vue 3.5. While it might work with older Vue 3 versions (>=3.3.0), using Vue 3.5 ensures full compatibility and access to the latest features and optimizations.","severity":"gotcha","affected_versions":">=2.13.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you have called `app.use(ElementPlus);` in your main application entry file (e.g., `main.ts` or `main.js`). If using individual components without global registration, ensure they are imported and registered locally in your Vue component's `