A JSON schema based form generator without any fields!
There are no prebuilt components for you to puzzle your form together with. Instead you can use any component or element which emits an event, custom or native.
Note that essentially all Vue components that uses
v-model
emits aninput
(or similar) event. See Vue's guide for more info
Upgrading from v1? Check out the v2 release notes to see if and how migration affects you.
Install from npm
npm install vue-form-json-schema
Import to your app
import Vue from 'vue';
import VueFormJsonSchema from 'vue-form-json-schema';
Vue.component('vue-form-json-schema', VueFormJsonSchema);
Check out the demos or see a minimal example in the usage instructions to get started.
If you're using the UMD version you can find more examples in the
examples
folder of the github repo and the UMD demo below.
If you want to use vue-form-json-schema
directly in a browser you can do so by using the UMD version. The UMD version autoinstalls the vue-form-json-schema
component if Vue is found on the window. The entire module is also available on window.VueFormJsonSchema
where the named exports such as for example vfjsFieldMixin
can be accessed.
<script src="https://unpkg.com/vue-form-json-schema@latest/dist/vue-form-json-schema.umd.js"></script>
You can substite vue-form-json-schema@latest
to a fixed version, such as vue-form-json-schema@2.3.0
<script src="../node_modules/dist/vue-form-json-schema.umd.js"></script>
Note that all demos use Bootstrap styling, but no styling is included in this package and it is up to you what styles should be used.
The least amount of configuration to render an input
element.
Using Bootstrap classes to show how layout can be different for devices with different screen sizes.
In this example two input fields will be wrapped inside a div with col-12 col-sm-6
classes.
Try resizing your browser window too see it in action.
Sometimes a field should only be shown if a condition is met. Uses <transition>
to provide animation.
See how to use your own or third party Vue components in vue-form-json-schema
.
Loading the form from a backend? Check out this example.
A more complete example with validation and error messages
All the examples above are replicated using the UMD version in the examples
folder of this repo.
Online version of the first demo
- Supports any HTML element or Vue component
- Small (
32K
uncompressed,6.5K
gzipped) - Standardized JSON schema for annotation and validation (by Ajv)
- Layout is independent from data structure
For using the UMD version, check out the
examples
folder where all the demos above are replicated using the UMD version
<template>
<vue-form-json-schema
v-model="model"
:schema="schema"
:ui-schema="uiSchema"
>
</vue-form-json-schema>
</template>
<script>
export default {
data() {
return {
// An object which holds the form values
model: {},
// A valid JSON Schema object
schema: {
type: 'object',
properties: {
firstName: {
type: 'string',
},
},
},
// Array of HTML elements or Vue components
uiSchema: [{
component: 'input',
model: 'firstName',
// Same API as [Vue's render functions](https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth)
fieldOptions: {
class: ['form-control'],
on: ['input'],
attrs: {
placeholder: 'Please enter your first name',
},
},
}],
};
}
};
</script>
For form validation using JSON Schema and internal validation
get
, set
and merge
are used throughout the package.
Bundle size is very important though and is always considered and so we heavily strip down lodash to only include the absolute necessities
Tested with v2.5.9 but will probably work on any version >= v2.4.0
- Write tests
Add i18n support- Added in 1.15.2 with
options.ajv.locale
setting
- Added in 1.15.2 with
Write this README- Use Ajv internally to validate:
vfs-global
propui-schema
vfs-component
propui-schema
Write docsPublish with Gitbook