Here is a step-by-step tutorial on Form generation using JSON schema in VueJS for implementing vuetify-jsonschema-form to generate and customize the form

1. Easy and
Quick Form
Generation
Using JSON
Schema in
VueJS
www.bacancytechnology.com

2. Overview

3. We developers always find ways to get
things done quickly and efficiently. Keeping
the need for easy form generation in lesser
time, here’s a tutorial for you! A few days
back, there was a client requirement for
integrating form and customizing it in the
project using vuetify-jsonschema-form.
Searching for a proper informative tutorial
for the same was a real struggle. The task
was done with efficiency within the deadline.
But, the thought crossed my mind what if
another fellow developer might face this
same issue. So, to lessen their struggle and
smoothen the process here’s a form
generation using JSON schema in VueJS that
will show a hustle-free technique of
implementing vuetify-jsonschema-form to
generate and customize the form.

4. Supports all basic data types.
Allows the implementation of nested
objects and nested arrays.
Supports different display options.
Supports validation against the provided
schema.
Allows content injection using slots.
Provides consistency and reusability.
Here are some benefits of implementing
vuetify-jsonschema-form:
There are many packages that support
jsonSchema. But, here in this tutorial, we will
discuss @koumoul/vuetify-jsonschema-
form and implement a few advanced
features.

5. Initial Set-Up

6. For initial set-up, use the below-mentioned
commands.
(If vue-cli is not already installed, npm
install -g @vue/cli)
vue create schema-app
cd schema-app

7. Install
Dependencies

8. Now it’s time to install vuetify and vuetify-
jsonschema-form. For that, fire the below
commands.
vue add vuetify
npm i --save @koumoul/vuetify-
jsonschema-form
Since this is a small demo application, the
folder structure will be quite simple. Here’s
the basic structure.

9. And main.js will look like this:
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')

10. Configure
SchemaForm.vue

11. SchemaForm.vue will be our main
component which would have logic and UI
of the demo. Import the needed
dependencies and CSS file in
SchemaForm.vue component as shown
below.
// SchemaForm.vue
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import Draggable from 'vuedraggable'
import Swatches from 'vue-swatches'
import 'vue-swatches/dist/vue-
swatches.min.css'
import VJsonschemaForm from
'@koumoul/vuetify-jsonschema-form'
import '@koumoul/vuetify-jsonschema-
form/dist/main.css'
import { Sketch } from 'vue-color'

12. Vue.use(Vuetify)
Vue.component('swatches', Swatches)
Vue.component('draggable', Draggable)
Vue.component('color-picker', Sketch)
export default {
name: 'SchemaForm',
components: {
VJsonschemaForm,
},
}
Are you looking for skilled and dedicated
VueJS developers for performant real-time
applications? If yes, hire VueJS developer
with efficient problem-solving skills.

13. Passing
Values to
Props

14. After importing the package, it’s time to use
it. The package provides the to which you
can pass values to its props.
<template>
<v-container>
<h1>Create Form using json-schema</h1>
<v-jsonschema-form
v-if="
schemaData &&
Object.keys(schemaData).length > 0
"
:schema="schemaData"
:model="modelData"
:options="schemaOptions"
/>
<v-btn color="light-blue"
@click="saveJson">Save</v-btn
>
</v-container>
</template>

15. v-if will check whether there are
properties in schemaData or not.
Schema prop the library understands
this schema prop as the structure of
your your form fields. Here, the schema
prop takes schemaData object as the
value and thus the UI displays the given
fields.
Model prop stands for the values we fill
in the form which we will be acquired in
the modelData object. So whatever data
entered by the user will be stored in the
modelData and further send to model
prop.
Options prop stands for the additional
options that we want to give.
Explanation:

16. Example:
schemaOptions : {
debug: false,
disableAll: false,
autoFoldObjects: true
}
Here, is the initial data and methods
defined in the demo.
data: () => ({
schemaData: require("./schema"),
modelData: {},
schemaOptions: {
"accordionMode": "normal"
}
}),

17. Here schemaData will fetch the form fields
which we have defined in the schema.json.
So, the structure of our form is decided
from whatever fields and types we define in
the JSON file.
Let’s have a look at our schema.json file.
// schema.json
{
"type": "object",
"title": "",
"required": ["Name"],
"properties": {
"Name": {
"type": "string",
"title": "Name "
},
"Gender": {
"type": "string",
"title": "Gender ",
"enum": ["Male", "Female", "Other"],
"attrs": {

18. "placeholder": "Select gender",
"title": "Please select gender"
}
},
"FavColor": {
"title": "Select favourite color using color
picker",
"description": "In hex format",
"type": "string",
"format": "hexcolor",
"x-display": "color-picker"
},
"Active": {
"type": "boolean",
"title": "Profile Active?",
"description": "",
"default": true,
"attrs": {
"type": "switch"
}
},

19. "Hobby": {
"type": "array",
"title": "Hobbies",
"items": {
"$ref": "#/definitions/hobby"
}
},
"PaymentInfo": {
"type": "object",
"title": "Payment Info",
"oneOf": [
{
"$ref": "#/definitions/creditCard"
},
{
"$ref": "#/definitions/upi"
}
]
}
},
"definitions": {
"hobby": {

20. "type": "object",
"properties": {
"Hobby": {
"type": "string"
},
"isCertified": {
"title": "Is certified?",
"type": "boolean"
}
}
},
"creditCard": {
"title": "Main infos",
"properties": {
"address": {
"type": "string",
"maxLength": 2000
},
"credit_card": {
"type": "number"
}
},

21. "dependencies": {
"credit_card": {
"properties": {
"billing_address": {
"type": "string"
}
},
"required": ["billing_address"]
}
}
},
"upi": {
"title": "UPI",
"properties": {
"upiId": {
"type": "string"
}
}
}
}
}

22. For this form schema, we can directly define
the type, if required without worrying about
its HTML. Like, Date-time, Drop Down, Color
picker, Range selector, Switch, etc.
Here, the field Hobby is an array of objects
which is defined later in
definitions.PaymentInfo field lets us select one
of the references (CreditCard/UPI). It also
supports dependent fields, if we want to
display other fields on conditional basis, for
example, billing-address will only be displayed
if the credit-card number is entered. It also
saves time for both Frontend and Backend
developers for saving and pre-filling forms.
So, this was about form generation using JSON
schema in VueJS. There’s still a lot more
advanced features and properties offered by
vuetify-jsonschema-form. This was just a basic
implementation of it. Feel free to explore more
and generated forms.

23. Github
Repository:
Form
Generation
using JSON
Schema in
VueJS

24. You can visit here – Github Repository and
play around with code or follow the steps
mentioned above for developing the
application.

25. Conclusion

26. I hope this tutorial of form generation using
JSON schema in VueJS have helped you get
started with the package. For more such
tutorials visit VueJS tutorial page where you
can clone the repository and explore more.
We have tutorials covering both
fundamental and advanced VueJS topics.

27. Thank You
www.bacancytechnology.com