element-plus-reference

Install unplugin-vue-components and unplugin-auto-import, then configure both plugins in vite.config.ts with ElementPlusResolver. After that, el-* components can be used directly in templates without manual imports, and styles are handled automatically.

Bind :model and :rules on el-form, set prop on each el-form-item matching the model field names, then call formRef.value.validate() to run validation. The callback receives a valid flag and the failed fields for error handling.

Element Plus supports only Vue 3 while Element UI supports only Vue 2. Their APIs are highly similar but not identical, with differences in icon usage and slot naming, so Vue 2 projects must stay on Element UI.

With full import you must explicitly import 'element-plus/dist/index.css' in main.ts. With on-demand auto-import, the unplugin-vue-components resolver handles style injection automatically, so missing styles usually indicate misconfigured resolvers.

Override CSS variables like --el-color-primary on :root for simple changes, or use SCSS with @forward on the theme-chalk var.scss file to override $colors and $border-radius at build time. Dark mode is enabled by importing the dark css-vars file and adding the dark class.

No, Element Plus only supports Vue 3 (version ^3.3.7) with Node >= 20. React projects should use alternatives like antd, and Vue 2 projects should use the original Element UI library instead.