JSON Forms - More Forms. Less Code

Complex Forms in the blink of an eye

JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.

Vue 2 Vuetify Renderers

This is the JSON Forms Vue 2 Vuetify renderers package which provides a Vuetify based renderer set for JSON Forms Vue 2.

Quick start

Install JSON Forms Core, Vue 2 and Vue 2 Vuetify Renderers.

1npm i --save @jsonforms/core @jsonforms/vue2 @jsonforms/vue2-vuetify

Also add the packages to the transpile dependencies in the vue.config.js file:

1module.exports = {
2    transpileDependencies: ['@jsonforms/core', '@jsonforms/vue2', '@jsonforms/vue2-vuetify']
3}

Use the json-forms component for each form you want to render and hand over the renderer set.

1<script>
2import { JsonForms } from '@jsonforms/vue2';
3import { vuetifyRenderers } from '@jsonforms/vue2-vuetify';
4
5const renderers = [
6  ...vuetifyRenderers,
7  // here you can add custom renderers
8];
9
10export default defineComponent({
11  name: 'app',
12  components: {
13    JsonForms,
14  },
15  data() {
16    return {
17      renderers: Object.freeze(renderers),
18      data,
19      schema,
20      uischema,
21    };
22  },
23  methods: {
24    onChange(event) {
25      this.data = event.data;
26    },
27  },
28});
29</script>
30<template>
31  <json-forms
32    :data="data"
33    :schema="schema"
34    :uischema="uischema"
35    :renderers="renderers"
36    @change="onChange"
37  />
38</template>

As JSON Forms uses the Composition API you need to use at least Vue 2.7.

If note done yet, please install Vuetify for Vue 2.

For more information on how JSON Forms can be configured, please see the README of @jsonforms/vue2.

License

The JSONForms project is licensed under the MIT License. See the LICENSE file for more information.