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>
Installation
API
Last updated 1 year ago