Registry / development / vue-form-json-schema

vue-form-json-schema

library2.9.5jsnpmunverified

Vue 2 package for generating and validating forms from JSON Schema definitions, version 2.9.5. Released regularly with a focus on reactive form generation, nested structures, and customization via Vue components. Provides a reusable form component that accepts a JSON schema and a v-model to bind form data, supporting validation with AJV or other validators. Differentiates from generic form builders by tight Vue 2 integration and minimal boilerplate. Note: Vue 3 is not supported; users must be on Vue 2.x.

development

npm install vue-form-json-schema

package ↗

INSTALL

IMPORT

SIG · VUE-FORM-JSON-SCHE

vue-form-json-schema

developmentjavascriptv2.9.5

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.

vue-form-json-schema

✓ import VueFormJsonSchema from 'vue-form-json-schema'; import { VueFormJsonSchema } from 'vue-form-json-schema';

✗ const VueFormJsonSchema = require('vue-form-json-schema');

ESM import recommended. CommonJS require may not work with some bundlers.

VueFormJsonSchema

✓ import { VueFormJsonSchema } from 'vue-form-json-schema'

✗ import VueFormJsonSchema from 'vue-form-json-schema'

Named export for the component. Default export is also the same component but using named is explicit.

VueFormJsonSchemaValidator

✓ import { VueFormJsonSchemaValidator } from 'vue-form-json-schema'

✗ import VueFormJsonSchemaValidator from 'vue-form-json-schema'

Named export, not default.

Shows minimal setup: import component, register globally, use in template with v-model and schema.

import Vue from 'vue'; import App from './App.vue'; import VueFormJsonSchema from 'vue-form-json-schema'; Vue.component('vue-form-json-schema', VueFormJsonSchema); new Vue({ render: h => h(App), }).$mount('#app');  <template> <vue-form-json-schema v-model="formData" :schema="schema" @submit="onSubmit" /> </template> <script> export default { data() { const schema = { type: 'object', properties: { name: { type: 'string' }, age: { type: 'number' }, }, }; return { formData: {}, schema, }; }, methods: { onSubmit(data) { console.log('Form submitted:', data); }, }, }; </script>

Debug

Known issues

breakingVue 3 not supported; only Vue 2.x.

fix

Use Vue 2 or consider switching to vue-json-schema-form for Vue 3.

affects: >=2.0.0

gotchaSchema must be JSON Schema draft-07 compliant; custom validators not supported out-of-box.

fix

Ensure schema format; use Ajv for custom validation if needed.

affects: >=2.0.0

deprecatedLegacy v-model pattern with arrays may cause reactivity issues in Vue 2.

fix

Use Vue.set or clone data when modifying arrays.

affects: >=1.0.0

gotchaComponent requires immediate registration before use; not tree-shakeable.

fix

Register globally as shown in quickstart or use Vue.component.

affects: >=2.0.0

Errors

Common errors & fixes

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

Component not registered in Vue instance.

fix

Vue.component('vue-form-json-schema', VueFormJsonSchema) before creating Vue instance.

Cannot read property 'properties' of undefined

Schema property not provided or is null.

fix

Always provide a valid JSON schema object in :schema prop.

TypeError: this.$scopedSlots is not a function (Vue 2.6+)

Using old slot syntax; requires slot-scope or v-slot.

fix

Use v-slot syntax for templates.

Upgrade

Version history

2.9.5latest on npm

Audit

Dependencies

vuerequiredPeer dependency; requires Vue 2.x runtime

Agent activity

39 hits · last 30 days

node

Resources

packagevue-form-json-schema ↗