Element Plus Vue3
Look up Element Plus Vue 3 props, events, slots, and methods while building admin dashboards and forms without leaving the agent session.
Overview
element-plus-vue3 is an agent skill for the Build phase that supplies Element Plus Vue 3 component props, events, and slots for faster admin UI implementation.
Install
npx skills add https://github.com/teachingai/full-stack-skills --skill element-plus-vue3What is this skill?
- Documents common props (size, disabled, className, style) and events (click, change, focus, blur) shared across Element
- Covers Button variants (type, loading, plain, round, circle, icon) and Input behaviors (v-model, clearable, show-passwor
- Includes Form API (model, rules, label-width, label-position) for validation-heavy admin UIs
- Structured as a quick API reference rather than a full design-system tutorial
Adoption & trust: 1.8k installs on skills.sh; 475 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are coding Vue 3 screens with Element Plus and keep guessing prop and event names instead of shipping consistent forms and buttons.
Who is it for?
Solo builders using Vue 3 + Element Plus for dashboards, settings pages, and form-heavy SaaS UIs who want fast API lookup during implementation.
Skip if: Teams needing full theming, i18n, or accessibility audits, or projects not using Vue 3 and Element Plus.
When should I use this skill?
You are implementing or refactoring Vue 3 UI that uses Element Plus and need accurate props, events, or slots for Button, Input, or Form components.
What do I get? / Deliverables
Your agent answers with correct Element Plus API shapes so you can wire buttons, inputs, and forms without breaking validation or slot conventions.
- Correct component API usage in generated or edited Vue SFC code
Recommended Skills
Journey fit
How it compares
Use as a focused component API cheat sheet instead of dumping entire Element Plus documentation into every chat.
Common Questions / FAQ
Who is element-plus-vue3 for?
Indie and solo developers building Vue 3 web apps with Element Plus who want the agent to recall common component APIs while coding frontend features.
When should I use element-plus-vue3?
During Build → frontend when you add buttons, inputs, or forms; also when you validate event names or slot usage before opening the official docs.
Is element-plus-vue3 safe to install?
It is reference text only with no shell or network calls; review the Security Audits panel on this Prism page before adding any skill to your agent.
SKILL.md
READMESKILL.md - Element Plus Vue3
# Component API ## API Reference Element Plus component props, events, and methods. ### Common Props Most components support: - `size` - Component size (large, default, small) - `disabled` - Disabled state - `className` - Custom class name - `style` - Custom style ### Common Events Most components emit: - `@click` - Click event - `@change` - Change event - `@focus` - Focus event - `@blur` - Blur event ### Button Component **Props:** - `type` - Button type (primary, success, info, warning, danger) - `size` - Button size (large, default, small) - `disabled` - Disabled state - `loading` - Loading state - `plain` - Plain button - `round` - Round button - `circle` - Circle button - `icon` - Icon component **Events:** - `@click` - Click event ### Input Component **Props:** - `v-model` - Input value - `type` - Input type (text, password, textarea) - `size` - Input size (large, default, small) - `disabled` - Disabled state - `readonly` - Readonly state - `clearable` - Show clear button - `show-password` - Show password toggle - `placeholder` - Placeholder text - `maxlength` - Max length **Events:** - `@input` - Input event - `@change` - Change event - `@focus` - Focus event - `@blur` - Blur event **Slots:** - `prefix` - Prefix content - `suffix` - Suffix content - `prepend` - Prepend content - `append` - Append content ### Form Component **Props:** - `model` - Form data object - `rules` - Validation rules - `label-width` - Label width - `label-position` - Label position (left, right, top) **Methods:** - `validate` - Validate form - `validateField` - Validate specific field - `resetFields` - Reset form fields - `clearValidate` - Clear validation **Events:** - `@validate` - Validation event ### Table Component **Props:** - `data` - Table data - `columns` - Table columns - `stripe` - Stripe rows - `border` - Show border - `size` - Table size **Events:** - `@selection-change` - Selection change event - `@row-click` - Row click event - `@sort-change` - Sort change event **See also:** `examples/components/` for detailed component examples # Global Configuration ## API Reference Element Plus global configuration options. ### Global Config Options When using `app.use(ElementPlus, options)`, you can pass: ```typescript interface ElementPlusOptions { size?: 'large' | 'default' | 'small' zIndex?: number locale?: Locale } ``` ### ConfigProvider Props **Props:** - `size` - Global size (large, default, small) - `zIndex` - Global z-index (default: 3000) - `locale` - Locale object - `button` - Button config - `message` - Message config ### Example: Global Config ```javascript import { createApp } from 'vue' import ElementPlus from 'element-plus' import zhCn from 'element-plus/dist/locale/zh-cn.mjs' const app = createApp(App) app.use(ElementPlus, { size: 'large', zIndex: 3000, locale: zhCn }) ``` ### Example: ConfigProvider ```vue <template> <el-config-provider :size="size" :z-index="zIndex" :locale="locale" > <el-button>Button</el-button> </el-config-provider> </template> <script setup> import { ref } from 'vue' import zhCn from 'element-plus/dist/locale/zh-cn.mjs' const size = ref('default') const zIndex = ref(3000) const locale = ref(zhCn) </script> ``` ### Size Configuration **Options:** - `'large'` - Large size - `'default'` - Default size - `'small'` - Small size ### z-index Configuration **Default:** `3000` Controls z-index for overlays (Dialog, Drawer, etc.). ### Locale Configuration Import locale from `element-plus/dist/locale/`: - `zh-cn.mjs` - Chinese (Simplified) - `en.mjs` - English - `es.mjs` - Spanish - `fr.mjs` - French - `ja.mjs` - Japanese - `ko.mjs` - Korean **See also:** `examples/guide/i18n.md` for i18n examples # Props and Events ## API Reference Common props and events in Element Plus components. ### Common Props #### size **Type:** `'large' | 'default' | 'small'` Component size. #### disabled **Type:** `boolean` **Default:** `false` Wheth