Element UI Vue CLI Plugin

1.0.1 · deprecated · verified Sun Apr 19

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.

Common errors

```
Error: Cannot find module 'element-ui'
```
cause The `element-ui` package was not installed or failed to install correctly in the project.

fix Ensure `element-ui` is installed in your project: `npm install element-ui -S` or `yarn add element-ui`.
```
[Vue warn]: Unknown custom element: <el-button> - did you register the component correctly?
```
cause Element UI components were not correctly registered with Vue, or an on-demand import missed a specific component.

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.
```
TypeError: The 'compilation' argument must be an instance of Compilation
```
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.

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`.

Warnings

breaking 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.
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.
deprecated 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.
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).
gotcha 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.
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.
gotcha 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.
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.

Install

npm install vue-cli-plugin-element npm
yarn add vue-cli-plugin-element yarn
pnpm add vue-cli-plugin-element pnpm

Imports

Vue
wrong:
```
const Vue = require('vue')
```
correct:
```
import Vue from 'vue'
```
Standard Vue import for a main application entry point.
ElementUI (Full Import)
wrong:
```
import Element, { Button } from 'element-ui';
```
correct:
```
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
```
Full import of Element UI and its default theme. The plugin usually handles this or provides an option for it.
ElementUI (On-Demand Import)
wrong:
```
import { Button } from 'element-ui/lib/button';
```
correct:
```
import { Button, Select } from 'element-ui';
import 'element-ui/lib/theme-chalk/button.css';
import 'element-ui/lib/theme-chalk/select.css';
```
On-demand import for tree-shaking. The plugin offers an option to configure Babel for automatic component and style imports, simplifying this pattern significantly.

Quickstart

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.

vue create my-element-app
cd my-element-app
vue add element

# When prompted:
# ? How do you want to import Element? (Use arrow keys)
# > Full import
#   Import on demand
# ? Choose Element theme: (Use arrow keys)
# > Default
#   Customize

# Example usage in a component (e.g., src/components/HelloWorld.vue or src/App.vue)
// <template>
//   <div id="app">
//     <el-button type="primary" @click="showAlert">Click Me</el-button>
//     <el-input v-model="message" placeholder="Please input"></el-input>
//   </div>
// </template>

// <script>
// export default {
//   name: 'App',
//   data() {
//     return {
//       message: ''
//     };
//   },
//   methods: {
//     showAlert() {
//       this.$alert('Hello from Element UI!', 'Greeting', {
//         confirmButtonText: 'OK',
//       });
//     }
//   }
// };
// </script>

view raw JSON →