avue-form Skill | Agent Skills

When to use this skill

Use this skill whenever the user wants to:

Create configuration-driven forms with Avue Form
Define form fields with types (input, select, date, checkbox, upload, etc.)
Implement form validation rules
Build dynamic forms, form groups, or tabbed form layouts
Handle form submit, reset, and field change events

How to use this skill

Workflow

Install - npm install @avue/form and register with Vue.use(Avue)
Define option - Configure columns with labels, props, types, and rules
Bind v-model - Two-way bind the form data object
Handle events - Listen for @submit, @reset-change, and field-level events

Quick-Start Example: Form with Validation

<template>
  <avue-form :option="option" v-model="form" @submit="handleSubmit" @reset-change="handleReset">
  </avue-form>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      option: {
        submitText: 'Save',
        column: [
          {
            label: 'Name',
            prop: 'name',
            type: 'input',
            span: 12,
            rules: [{ required: true, message: 'Name is required', trigger: 'blur' }]
          },
          {
            label: 'Role',
            prop: 'role',
            type: 'select',
            span: 12,
            dicData: [
              { label: 'Admin', value: 'admin' },
              { label: 'User', value: 'user' }
            ]
          },
          {
            label: 'Start Date',
            prop: 'startDate',
            type: 'date',
            format: 'yyyy-MM-dd'
          }
        ]
      }
    }
  },
  methods: {
    handleSubmit(form, done) {
      console.log('Form data:', form)
      // Call API, then done() to re-enable button
      done()
    },
    handleReset() {
      console.log('Form reset')
    }
  }
}
</script>

Feature Reference

| Feature | File | |---------|------| | Dynamic form | examples/features/dynamic-form.md | | Form layout | examples/features/form-layout.md | | Validation rules | examples/features/form-rules.md | | Form groups | examples/features/form-group.md | | Tabbed forms | examples/features/form-tabs.md | | Custom components | examples/features/custom-components.md |

API Reference

api/form-api.md - Component props, events, and slots
api/columns-api.md - Column types and properties
api/options-api.md - Form option configuration

Best Practices

Use column types - Set type: 'select', type: 'date', type: 'upload' for automatic controls
Call done() after submit - Always call done() in the submit handler to re-enable the button
Use span for layout - Set span: 12 for half-width fields (24 = full width grid)
Group related fields - Use group option to organize complex forms into sections
Validate on blur - Set trigger: 'blur' for a less intrusive validation experience

Resources

Official Docs: https://avuejs.com/form/form-doc.html

Keywords

Avue Form, avue-form, Vue form, dynamic form, 表单组件, 表单验证, form validation, form configuration, form columns, form rules

Agent Skills: avue-form

Install this agent skill to your local

Skill Files