{"id":12422,"library":"vue-cli-plugin-element","title":"Element UI Vue CLI Plugin","description":"This plugin integrates Element UI, a comprehensive UI toolkit for Vue.js 2.x, into projects initialized with `@vue/cli` versions 3.x and 4.x. It streamlines the setup process by providing automated scaffolding, configuration, and optional on-demand import capabilities for Element UI components. While the provided version is 1.0.1, the underlying `element-ui` library (v2.15.14) is specifically for Vue 2, and the `@vue/cli` framework itself is now in maintenance mode, superseded by faster build tools like Vite. Developers starting new Vue 3 projects are encouraged to use Element Plus with Vite, as this plugin targets a legacy technology stack. This plugin significantly simplifies the initial integration for Vue 2 applications, reducing manual configuration steps for a large component library.","status":"deprecated","version":"1.0.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/ElementUI/vue-cli-plugin-element","tags":["javascript","element","element-ui","vue","vue-cli","plugin","cli"],"install":[{"cmd":"npm install vue-cli-plugin-element","lang":"bash","label":"npm"},{"cmd":"yarn add vue-cli-plugin-element","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-cli-plugin-element","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required globally to scaffold and manage Vue projects and add plugins. This plugin is designed for Vue CLI 3.x and 4.x.","package":"@vue/cli","optional":false},{"reason":"The core UI component library that this plugin integrates into Vue 2 projects.","package":"element-ui","optional":false}],"imports":[{"note":"Standard Vue import for a main application entry point.","wrong":"const Vue = require('vue')","symbol":"Vue","correct":"import Vue from 'vue'"},{"note":"Full import of Element UI and its default theme. The plugin usually handles this or provides an option for it.","wrong":"import Element, { Button } from 'element-ui';","symbol":"ElementUI (Full Import)","correct":"import Element from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';"},{"note":"On-demand import for tree-shaking. The plugin offers an option to configure Babel for automatic component and style imports, simplifying this pattern significantly.","wrong":"import { Button } from 'element-ui/lib/button';","symbol":"ElementUI (On-Demand Import)","correct":"import { Button, Select } from 'element-ui';\nimport 'element-ui/lib/theme-chalk/button.css';\nimport 'element-ui/lib/theme-chalk/select.css';"}],"quickstart":{"code":"vue create my-element-app\ncd my-element-app\nvue add element\n\n# When prompted:\n# ? How do you want to import Element? (Use arrow keys)\n# > Full import\n#   Import on demand\n# ? Choose Element theme: (Use arrow keys)\n# > Default\n#   Customize\n\n# Example usage in a component (e.g., src/components/HelloWorld.vue or src/App.vue)\n// <template>\n//   <div id=\"app\">\n//     <el-button type=\"primary\" @click=\"showAlert\">Click Me</el-button>\n//     <el-input v-model=\"message\" placeholder=\"Please input\"></el-input>\n//   </div>\n// </template>\n\n// <script>\n// export default {\n//   name: 'App',\n//   data() {\n//     return {\n//       message: ''\n//     };\n//   },\n//   methods: {\n//     showAlert() {\n//       this.$alert('Hello from Element UI!', 'Greeting', {\n//         confirmButtonText: 'OK',\n//       });\n//     }\n//   }\n// };\n// </script>","lang":"javascript","description":"Demonstrates how to install the plugin and quickly set up a Vue CLI project with Element UI components like Button and Input, and use a message box."},"warnings":[{"fix":"For Vue 3 projects, use Element Plus (`element-plus`) instead of Element UI (`element-ui`). Consider using the `vue-cli-plugin-element-plus` if you are still using Vue CLI for Vue 3, though Element Plus generally recommends Vite.","message":"This plugin is specifically designed for Vue 2.x projects and is incompatible with Vue 3.x. Attempting to use it in a Vue 3 project will lead to runtime errors due to fundamental API changes in Vue 3 and Element UI's successor, Element Plus.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"For new projects or existing projects considering a major upgrade, migrate to Vite and `Element Plus` (for Vue 3). For continued use with Vue 2, ensure your Vue CLI version is compatible (e.g., Vue CLI 4.x).","message":"The underlying `@vue/cli` framework is in maintenance mode, with Vite being the recommended build tool for new Vue projects. This plugin is inherently tied to a superseded ecosystem and is no longer actively maintained.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Consistent use of either full import or on-demand import is recommended. If using on-demand, ensure Babel or webpack configurations are correctly set up (often handled by the plugin's generator) to import only the necessary components and their associated styles.","message":"Mixing full import and on-demand import strategies for Element UI in the same project without proper configuration can result in larger-than-necessary bundle sizes, negating the benefits of tree-shaking for on-demand imports.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always check the `package.json` requirements and the Vue CLI documentation for compatible Node.js and NPM versions. Upgrade Node.js/NPM if necessary, or use a Node Version Manager (nvm) to switch to a compatible version.","message":"Older versions of Vue CLI and this plugin might have specific Node.js and NPM version requirements. For example, Vue CLI v5 (which is still legacy) dropped support for Node.js 8-11 and 13, and NPM 5. Using incompatible versions can lead to installation or build failures.","severity":"gotcha","affected_versions":"<1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `element-ui` is installed in your project: `npm install element-ui -S` or `yarn add element-ui`.","cause":"The `element-ui` package was not installed or failed to install correctly in the project.","error":"Error: Cannot find module 'element-ui'"},{"fix":"Check `main.js` to ensure `Vue.use(Element)` (for full import) or individual components are correctly imported and registered, especially if using on-demand import and Babel-plugin-component configuration isn't active. Ensure you import styles for each component if doing manual on-demand imports.","cause":"Element UI components were not correctly registered with Vue, or an on-demand import missed a specific component.","error":"[Vue warn]: Unknown custom element: <el-button> - did you register the component correctly?"},{"fix":"Remove `node_modules` and your lockfile (`package-lock.json` or `yarn.lock`), then reinstall all dependencies: `rm -rf node_modules package-lock.json && npm install` or `rm -rf node_modules yarn.lock && yarn install`.","cause":"This error often occurs when upgrading Vue CLI or its plugins (or Webpack versions) without a clean install, leading to incompatibilities between old and new dependency versions.","error":"TypeError: The 'compilation' argument must be an instance of Compilation"}],"ecosystem":"npm"}