Vue Form Generator

VueFormGenerator Skill

Schema-based form generator for Vue.js 2 applications. Creates reactive forms from JSON schema definitions - ideal for complex, dynamic, or API-driven forms.

Overview

This skill provides:

When to Use VueFormGenerator vs Vuetify Forms

Preference: For larger forms in Baseweb projects, prefer VueFormGenerator's schema approach for maintainability.

Installation

npm install vue-form-generator

import Vue from 'vue'
import VueFormGenerator from 'vue-form-generator'
import 'vue-form-generator/dist/vfg.css'

Vue.use(VueFormGenerator)

Core vs Full Bundle

// Core (41kb) - Essential fields only
import VueFormGenerator from 'vue-form-generator/dist/vfg-core.js'
import 'vue-form-generator/dist/vfg-core.css'

// Full (50kb) - All field types
import VueFormGenerator from 'vue-form-generator'
import 'vue-form-generator/dist/vfg.css'

Basic Usage

<template>
  <vue-form-generator
    :schema="schema"
    :model="model"
    :options="formOptions"
    @validated="onValidated">
  </vue-form-generator>
</template>

<script>
export default {
  data() {
    return {
      model: {
        name: '',
        email: '',
        status: 'active'
      },
      schema: {
        fields: [
          {
            type: 'input',
            inputType: 'text',
            label: 'Name',
            model: 'name',
            required: true,
            validator: 'string'
          },
          {
            type: 'input',
            inputType: 'email',
            label: 'Email',
            model: 'email',
            validator: 'email'
          },
          {
            type: 'select',
            label: 'Status',
            model: 'status',
            values: ['active', 'inactive']
          }
        ]
      },
      formOptions: {
        validateAfterLoad: true,
        validateAfterChanged: true
      }
    }
  },
  methods: {
    onValidated(isValid, errors) {
      console.log('Valid:', isValid, 'Errors:', errors)
    }
  }
}
</script>

Schema Structure

Fields

schema: {
  fields: [
    {
      type: 'input',           // Field type
      inputType: 'text',       // Input type (for 'input' fields)
      label: 'Field Label',    // Display label
      model: 'fieldName',      // Model property (supports dot notation)
      placeholder: 'Enter...', // Placeholder text
      required: true,          // Required field
      readonly: false,         // Read-only
      disabled: false,         // Disabled
      visible: true,           // Show/hide (can be function)
      hint: 'Help text',       // Hint text
      help: 'Tooltip',         // Tooltip
      validator: 'string',     // Validator(s)
      styleClasses: 'col-6'    // CSS classes
    }
  ]
}

Groups

schema: {
  groups: [
    {
      legend: 'Personal Info',
      fields: [
        { type: 'input', model: 'firstName', label: 'First Name' },
        { type: 'input', model: 'lastName', label: 'Last Name' }
      ]
    },
    {
      legend: 'Contact',
      fields: [
        { type: 'input', inputType: 'email', model: 'email', label: 'Email' },
        { type: 'input', inputType: 'tel', model: 'phone', label: 'Phone' }
      ]
    }
  ]
}

Nested Models

model: {
  user: {
    profile: {
      name: 'John',
      address: {
        city: 'New York',
        country: 'USA'
      }
    }
  }
}

// Schema with dot notation
{
  type: 'input',
  model: 'user.profile.name',      // Deep nesting
  label: 'Name'
},
{
  type: 'input',
  model: 'user.profile.address.city',  // Very deep
  label: 'City'
}

Field Types

Core Fields (Available in Core Bundle)

Optional Fields (Full Bundle)

Validation

Built-in Validators

Using Validators

// Single validator (string shorthand)
{ type: 'input', model: 'name', validator: 'string' }

// Single validator (function)
{ type: 'input', model: 'name', validator: validators.string }

// Multiple validators (all must pass)
{ type: 'input', model: 'age', validator: ['integer', 'required'] }

// With parameters
{ type: 'input', model: 'password', min: 6, validator: 'string' }

Custom Validators

// Synchronous validator
const zipcodeValidator = (value) => {
  const re = /(^\d{5}$)|(^\d{5}-\d{4}$)/;
  if (!re.test(value)) {
    return ['Invalid Zip Code'];
  }
  return [];
};

// Asynchronous validator
const uniqueEmailValidator = (value) => {
  return new Promise((resolve) => {
    HTTP.get(`/checkEmail?value=${value}`)
      .then(() => resolve([]))
      .catch(() => resolve(['Email already exists']));
  });
};

// Register globally
Vue.use(VueFormGenerator, {
  validators: {
    zipcode: zipcodeValidator,
    uniqueEmail: uniqueEmailValidator
  }
});

// Usage
{ type: 'input', model: 'zip', validator: 'zipcode' }

Debounced Validation

// Per-field
{ type: 'input', model: 'name', validator: 'string', validateDebounceTime: 500 }

// Global
formOptions: {
  validateDebounceTime: 300
}

Dynamic Fields

Conditional Visibility

{
  type: 'input',
  model: 'company',
  label: 'Company Name',
  visible: function(model) {
    return model && model.type === 'business';
  }
}

Conditional Options

{
  type: 'select',
  model: 'region',
  values: function(model) {
    switch(model.country) {
      case 'US': return ['California', 'New York', 'Texas'];
      case 'CA': return ['Ontario', 'Quebec', 'British Columbia'];
      default: return [];
    }
  },
  visible: function(model) {
    return !!model.country;
  }
}

Disabled State

{
  type: 'input',
  model: 'readonlyField',
  disabled: function(model) {
    return model.status === 'locked';
  }
}

Data Transformation

{
  model: 'price',
  get: (model) => model.price / 100,        // Cents to dollars
  set: (model, value) => model.price = value * 100  // Dollars to cents
}

Form Options

formOptions: {
  validateAfterLoad: true,      // Validate on mount
  validateAfterChanged: true,   // Real-time validation
  validateAsync: true,          // Enable async validators
  validateDebounceTime: 300,    // Debounce validation
  fieldIdPrefix: 'user-form-'   // Prefix for field IDs
}

Events

Component Events

<vue-form-generator
  :schema="schema"
  :model="model"
  @validated="onValidated"
  @model-updated="onModelUpdated">
</vue-form-generator>

Field Events

{
  type: 'select',
  model: 'country',
  values: countries,
  onChanged: (model, newVal, oldVal, field) => {
    model.region = null;  // Reset dependent field
  }
}

Pattern Files

This skill includes detailed patterns:

• patterns/field-types.md - Complete field type reference
• patterns/validation.md - Validation patterns and custom validators
• patterns/custom-fields.md - Creating custom field components
• patterns/multi-step.md - Wizard-style forms
• patterns/vuetify-integration.md - Using Vuetify components with VFG

Integration with Baseweb

// pages/form.js
const FormPage = {
  navigation: {
    section: null,
    icon: 'form',
    text: 'Form',
    path: '/form',
    index: 10
  },
  template: `
<Page>
  <v-container>
    <v-card>
      <v-card-title>Dynamic Form</v-card-title>
      <v-card-text>
        <vue-form-generator
          :schema="schema"
          :model="model"
          :options="formOptions"
          @validated="onValidated">
        </vue-form-generator>
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn text @click="reset">Reset</v-btn>
        <v-btn color="primary" :disabled="!isValid" @click="submit">Submit</v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</Page>
  `,
  data() {
    return {
      model: {},
      schema: { fields: [] },
      formOptions: {
        validateAfterLoad: true,
        validateAfterChanged: true
      },
      isValid: false
    };
  },
  mounted() {
    this.$vuetify.goTo(0);
    this.loadSchema();
  },
  methods: {
    loadSchema() {
      $.ajax({
        url: '/api/form-schema',
        success: (response) => {
          this.schema = response.schema;
          this.model = response.model || {};
        }
      });
    },
    onValidated(isValid, errors) {
      this.isValid = isValid;
    },
    reset() {
      this.model = {};
    },
    submit() {
      $.ajax({
        url: '/api/submit',
        method: 'POST',
        data: JSON.stringify(this.model),
        success: (response) => {
          this.$notify({
            group: 'notifications',
            title: 'Success',
            text: 'Form submitted successfully',
            type: 'success'
          });
        }
      });
    }
  }
};

Navigation.add(FormPage);

Agent Collaboration

This skill collaborates with:

See Also

• VueFormGenerator Documentation
• GitHub Repository
• Vuetify Skill - For Vuetify integration

Source: christophevg/c3 — distributed by TomeVault.