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 Vuetify Renderers

This is the JSON Forms Vue Vuetify renderers package which provides a Vuetify based renderer set for JSON Forms Vue. The renderers are in a preview state.

Quick start

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

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

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

1module.exports = {
2    transpileDependencies: ['@jsonforms/core', '@jsonforms/vue', '@jsonforms/vue-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/vue';
3import { vuetifyRenderers } from '@jsonforms/vue-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
31<template>
32  <json-forms
33    :data="data"
34    :schema="schema"
35    :uischema="uischema"
36    :renderers="renderers"
37    @change="onChange"
38  />
39</template>
40
41<style scoped>
42@import '~@jsonforms/vue-vuetify/lib/jsonforms-vue-vuetify.esm.css';
43</style>

If note done yet, please install Vuetify for Vue.

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

License

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