Registry / testing / vue-form-generator

vue-form-generator

library2.3.4jsnpmunverified

Schema-based form generator component for Vue.js 2.x (v2.3.4). Generates reactive forms from JSON schema, supports 21 field types, built-in validators, Bootstrap-friendly templates, and custom field extensibility. Ships in core (11KB gzipped) and full (19KB gzipped) bundles. Developed by vue-generators, with maintenance focused on Vue 2.x. Uses fecha for date formatting and lodash internally. Alternative to vue-form-builder, offering a simpler schema-driven approach but limited to Vue 2.

testing

npm install vue-form-generator

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-FORM-GENERATOR

vue-form-generator

testingjavascriptv2.3.4

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueFormGenerator

✓ import VueFormGenerator from 'vue-form-generator'

✗ const VueFormGenerator = require('vue-form-generator')

ESM default import; CommonJS require works but best with ES modules. For full bundle, imports include all fields. For core, use 'vue-form-generator/dist/vfg-core.js'.

SchemaField

✓ import { SchemaField } from 'vue-form-generator'

Named export for individual field registration.

validators

✓ import { validators } from 'vue-form-generator'

✗ import { validator } from 'vue-form-generator'

Named export for built-in validators object. Common mistake: using singular 'validator'.

Shows basic setup: import component and CSS, register globally or as component, define schema with fields and validators, and bind model.

import Vue from 'vue'; import VueFormGenerator from 'vue-form-generator'; import 'vue-form-generator/dist/vfg.css'; Vue.use(VueFormGenerator); const schema = { fields: [ { type: 'input', inputType: 'text', label: 'Name', model: 'name', placeholder: 'Enter your name', validator: ['required'] }, { type: 'select', label: 'Gender', model: 'gender', values: ['Male', 'Female'], default: 'Male' } ] }; const model = { name: '', gender: 'Male' }; new Vue({ el: '#app', components: { 'vue-form-generator': VueFormGenerator.component }, data: { schema, model }, template: '<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>' });

Debug

Known issues

breakingVue 2.x only; does not support Vue 3

fix

Use alternative like vue-form-builder for Vue 3, or stay on Vue 2.

affects: >=2.0.0

gotchaWhen using custom fields, names must be kebab-case in templates but referenced with PascalCase in JavaScript

fix

Register as `my-field` in components, use `VueFormGenerator.registerField('my-field', MyField)`.

affects: >=2.0.0

gotchaCSS import required for proper styling; missing import causes unstyled form

fix

Add `import 'vue-form-generator/dist/vfg.css'` after JS import.

affects: >=2.0.0

deprecatedThe `label` property on a field was required in older versions; now optional but still widely used

fix

Include label for accessibility, but not mandatory.

affects: >=0.6.0

Errors

Common errors & fixes

Unknown custom element: <vue-form-generator> - did you register the component correctly?

Component not registered globally or locally

fix

Use `Vue.use(VueFormGenerator)` for global registration, or add to components object: `components: { 'vue-form-generator': VueFormGenerator.component }`.

Cannot find module 'fecha'

Missing dependency fecha

fix

Run `npm install fecha` or ensure all dependencies installed with `npm install`.

undefined is not an object (evaluating 'this.$options.schema')

Using VueFormGenerator in a component without passing `:schema` prop

fix

Add `:schema="schema"` to the <vue-form-generator> element.

Upgrade

Version history

2.3.4latest on npm

Audit

Dependencies

fecharequiredDate formatting

lodashrequiredUtility functions

Agent activity

11 hits · last 30 days

node

Resources

githubhttps://github.com/vue-generators/vue-form-generator ↗

packagevue-form-generator ↗

homepagehttps://github.com/vue-generators/vue-form-generator/ ↗