{"id":22519,"library":"unplugin-element-plus","title":"unplugin-element-plus","description":"An unplugin-based tool for on-demand Element Plus style imports and locale replacement. Current stable version is 0.11.2. Release cadence is irregular with breaking changes in major versions. Key differentiators: supports Vite, Webpack, Vue CLI, Rollup, esbuild, Rspack, and Rolldown via unplugin. Automatically injects the corresponding CSS/SCSS import for each Element Plus component used. Offers options like `useSource` for SCSS vs CSS, `format` for ESM/CJS, `prefix` for custom component prefixes, and `ignoreComponents` to skip certain components. Ships TypeScript types (v0.11.2).","status":"active","version":"0.11.2","language":"javascript","source_language":"en","source_url":"https://github.com/element-plus/unplugin-element-plus","tags":["javascript","element-plus","unplugin","vite","webpack","rollup","esbuild","plugin","typescript"],"install":[{"cmd":"npm install unplugin-element-plus","lang":"bash","label":"npm"},{"cmd":"yarn add unplugin-element-plus","lang":"bash","label":"yarn"},{"cmd":"pnpm add unplugin-element-plus","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency providing the plugin interface for multiple build tools.","package":"unplugin","optional":false},{"reason":"Used to parse import statements and transform on-demand imports.","package":"es-module-lexer","optional":false},{"reason":"Used for source code transformations with source maps.","package":"magic-string","optional":false}],"imports":[{"note":"Since v0.10.0, CJS build is dropped; ESM-only. Use dynamic import if CommonJS required.","wrong":"const ElementPlus = require('unplugin-element-plus/vite')","symbol":"ElementPlus (plugin factory)","correct":"import ElementPlus from 'unplugin-element-plus/vite'"},{"note":"ESM-only; destructure default export. Rollup config must be ESM.","wrong":"const ElementPlus = require('unplugin-element-plus/rollup')","symbol":"ElementPlus (Rollup plugin)","correct":"import ElementPlus from 'unplugin-element-plus/rollup'"},{"note":"ESM-only; use dynamic import in CommonJS esbuild config: const { default: ElementPlus } = await import('unplugin-element-plus/esbuild')","wrong":"const ElementPlus = require('unplugin-element-plus/esbuild')","symbol":"ElementPlus (esbuild plugin)","correct":"import ElementPlus from 'unplugin-element-plus/esbuild'"},{"note":"Webpack configs are often CommonJS; requires .default access. Since v0.10.0, package is ESM but Webpack entry still works with .default.","wrong":"const ElementPlus = require('unplugin-element-plus/webpack')","symbol":"ElementPlus (Webpack plugin)","correct":"const ElementPlus = require('unplugin-element-plus/webpack').default"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport ElementPlus from 'unplugin-element-plus/vite'\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    ElementPlus({\n      // Options (optional)\n      useSource: false, // Use CSS instead of SCSS\n      format: 'esm',\n      // ignoreComponents: ['ElAutoResizer']\n    }),\n  ],\n})\n\n// main.ts\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport { ElButton, ElInput } from 'element-plus'\n\n// Without the plugin, you'd need to manually import styles:\n// import 'element-plus/es/components/button/style/css'\n// import 'element-plus/es/components/input/style/css'\n\n// With the plugin, CSS is automatically injected.\ncreateApp(App).mount('#app')","lang":"typescript","description":"Shows how to configure vite with ElementPlus plugin and demonstrates automatic style injection for ElButton and ElInput."},"warnings":[{"fix":"Upgrade Node.js to 20.19 or newer.","message":"Drop node 18, requires Node 20.19+","severity":"breaking","affected_versions":">=0.11.0"},{"fix":"Use ESM imports (import, import()) or configure bundler to handle ESM. For require() in Node.js, use dynamic import: const { default: ElementPlus } = await import('unplugin-element-plus/vite')","message":"Drop CJS build; package is ESM-only","severity":"breaking","affected_versions":">=0.10.0"},{"fix":"Upgrade Node to 18+ (or 20.19+ for v0.11+), upgrade Webpack to 5+ and Vue CLI to 5+.","message":"Drop Node 14 & 16 support; drop Webpack 4 & Vue CLI 4 support","severity":"breaking","affected_versions":">=0.9.0"},{"fix":"Use Element Plus's built-in locale system or use `unplugin-vue-components` for locale handling.","message":"The `defaultLocale` option is deprecated. Locale replacement moved to a different approach.","severity":"deprecated","affected_versions":">=0.6.0"},{"fix":"Set the `lib` option to match the third-party library's name and ensure its package structure mirrors element-plus.","message":"Plugin only transforms imports from 'element-plus' (or custom `lib`). Third-party UI libraries that extend Element Plus are not supported unless they mirror the output structure.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use dynamic import: const { default: ElementPlus } = await import('unplugin-element-plus/vite') or switch to ESM config.","cause":"Using CommonJS require() on an ESM-only package (v0.10.0+).","error":"Error: Cannot find module 'unplugin-element-plus/vite'"},{"fix":"Add .default: const ElementPlus = require('unplugin-element-plus/webpack').default","cause":"Using default import without .default when require() is used (CommonJS) on ESM package.","error":"TypeError: ElementPlus is not a function"},{"fix":"Upgrade Node.js to 20.19 or later, or downgrade to unplugin-element-plus@0.10.x.","cause":"Using v0.11.0+ which requires Node 20.19+.","error":"The 'unplugin-element-plus' package is not compatible with Node.js 18.x. Please upgrade to 20.19+"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}