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.

$3

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

``bash
npm i --save @jsonforms/core @jsonforms/vue @jsonforms/vue-vuetify
`

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

`js
// https://vitejs.dev/config/
export default defineConfig({
optimizeDeps: {
// Exclude vuetify since it has an issue with vite dev - TypeError: makeVExpansionPanelTextProps is not a function - the makeVExpansionPanelTextProps is used before it is defined
exclude: ['vuetify'],
},

// more config....
});
`

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

`vue



`

In your vuetify creation specify the icons used

Material Design Icons (mdi)

`js
import { mdi, aliases as mdiAliases } from 'vuetify/iconsets/mdi';
import { createVuetify } from 'vuetify';

import { mdiIconAliases } from '@jsonforms/vue-vuetify';
import '@mdi/font/css/materialdesignicons.css';

createVuetify({
icons: {
defaultSet: 'mdi',
sets: {
mdi,
},
aliases: { ...mdiAliases, ...mdiIconAliases };,
},
});
`

Font Awesome (fa)

`js
import { fa, aliases as faAliases } from 'vuetify/iconsets/fa';
import { createVuetify } from 'vuetify';

import { faIconAliases } from '@jsonforms/vue-vuetify';
import '@fortawesome/fontawesome-free/css/all.css';

createVuetify({
icons: {
defaultSet: 'fa',
sets: {
fa,
},
aliases: { ...faAliases, ...faIconAliases };,
},
});
`

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.

Customization

$3

All control renderers now support prepend and append slots, allowing you to add custom content before or after input fields without creating entirely custom renderers.

Example:

`vue

`

See the "Prepend/Append Slots (Basic)" example in the dev app.

Override the ControlWrapper component

All control renderers wrap their components with a ControlWrapper component, which by default uses DefaultControlWrapper to render the wrapper element around each control.

If you want to:

- Replace the DefaultControlWrapper with your own implementation, or
- Provide custom renderers that render their child controls differently,

you can use Vue’s provide / inject mechanism to supply your own wrapper under the ControlWrapperSymbol.

For example, the demo application includes a custom wrapper that can be enabled from the Example App Settings. It is registered like this:

`ts
import { provide, type DefineComponent } from 'vue';
import {
ControlWrapperSymbol,
type ControlWrapperProps,
} from '@jsonforms/vue-vuetify';

import ControlWrapper from './components/ControlWrapper.vue';

provide(
ControlWrapperSymbol,
ControlWrapper as DefineComponent,
);
``

License

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