JSON Forms - Vue.js 2 + Quasar v1 renderers

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

Please note that JSON Forms dropped support for Vue 2, and their version 3.1.0 is the last version that supports Vue 2. Also, as JSON Forms uses the Composition API you need to use at least Vue 2.7.

Quick start

Install JSON Forms Core, Vue 2 and Quasar v1 Renderers.

1npm i --save @jsonforms/core@3.1.0 @jsonforms/vue2@3.1.0 @sourcedigital/jsonforms-vue2-quasar-v1

Also add the packages to the transpile dependencies in the quasar.conf.js file:

1module.exports = {
2    transpileDependencies: ['@jsonforms/core', '@jsonforms/vue2', '@sourcedigital/jsonforms-vue2-quasar-v1']
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 { quasarRenderers } from '@sourcedigital/jsonforms-vue2-quasar-v1'';
4
5const renderers = [
6  ...quasarRenderers,
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>