Registry / web-framework / vue-cli-plugin-element

vue-cli-plugin-element

library1.0.1jsnpmunverified

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.

web-framework

npm install vue-cli-plugin-element

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-CLI-PLUGIN-ELE

vue-cli-plugin-element

web-frameworkjavascriptv1.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Vue

✓ import Vue from 'vue'

✗ const Vue = require('vue')

Standard Vue import for a main application entry point.

ElementUI (Full Import)

✓ import Element from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css';

✗ import Element, { Button } from 'element-ui';

Full import of Element UI and its default theme. The plugin usually handles this or provides an option for it.

ElementUI (On-Demand Import)

✓ import { Button, Select } from 'element-ui'; import 'element-ui/lib/theme-chalk/button.css'; import 'element-ui/lib/theme-chalk/select.css';

✗ import { Button } from 'element-ui/lib/button';

On-demand import for tree-shaking. The plugin offers an option to configure Babel for automatic component and style imports, simplifying this pattern significantly.

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>

Debug

Known issues

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

affects: >=1.0.0

deprecatedThe 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).

affects: >=1.0.0

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

affects: >=1.0.0

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

affects: <1.0.0

Errors

Common errors & fixes

Error: Cannot find module 'element-ui'

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?

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

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

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

@vue/clirequiredRequired globally to scaffold and manage Vue projects and add plugins. This plugin is designed for Vue CLI 3.x and 4.x.

element-uirequiredThe core UI component library that this plugin integrates into Vue 2 projects.

Agent activity

16 hits · last 30 days

node

OpenAI (training)

Amazon

Resources

githubhttps://github.com/ElementUI/vue-cli-plugin-element ↗

packagehttps://www.npmjs.com/package/vue-cli-plugin-element ↗

homepagehttps://element.eleme.io ↗