Getting started

Option 1

Import everything and use globally

// App.js
import VueFormJsonSchema from 'vue-form-json-schema';
Vue.component('vue-form-json-schema', VueFormJsonSchema);
<script>
// MyCustomComponent.js
export default {
data() {
return {
model: {},
schema: {
type: 'object',
properties: {
firstName: {
type: 'string'
}
}
},
uiSchema: [{
component: 'input',
model: 'firstName',
fieldOptions: {
class: ['form-control'],
on: ['input'],
attrs: {
placeholder: 'Please enter your first name'
}
}
}]
}
},
}
</script>
<template>
<vue-form-json-schema
v-model="model"
:schema="schema"
:ui-schema="uiSchema"
>
</vue-form-json-schema>
</template>

Option 2

Import and use locally

<script>
// MyCustomComponent.js
import VueFormJsonSchema from 'vue-form-json-schema';
export default {
data() {
return {
model: {},
schema: {
type: 'object',
properties: {
firstName: {
type: 'string'
}
}
},
uiSchema: [{
component: 'input',
model: 'firstName',
fieldOptions: {
class: ['form-control'],
on: ['input'],
attrs: {
placeholder: 'Please enter your first name'
}
}
}]
}
},
}
</script>
<template>
<vue-form-json-schema
v-model="model"
:schema="schema"
:ui-schema="uiSchema"
>
</vue-form-json-schema>
</template>