Install with npm install @educorvi/vue-json-form.
Import the CSS file into your application:
import '@educorvi/vue-json-form/dist/vue-json-form.css';Also, make sure that bootstrap 5 is set up for your site.
<script setup lang="ts">
import { type SubmitOptions, VueJsonForm } from '@educorvi/vue-json-form';
async function submitMethod(data: Record<string, any>, customSubmitOptions: SubmitOptions, evt: SubmitEvent) {
emit("viewCode", "Form Results", data);
}
</script>
<template>
<vue-json-form
:jsonSchema="json"
:uiSchema="ui"
:onSubmitForm="submitMethod"
></vue-json-form>
</template>
<style scoped>
</style>
The slot of the vue-json-form component will be rendered inside the form tag at the end. It can, for example, be used to add buttons if you don't want to add them to the ui-schema.
| Name | Description | Type | Required | Default |
|---|---|---|---|---|
| jsonSchema | The form's JSON Schema | Object |
true |
- |
| onSubmitForm | Method that is called, when the Form is submitted. Passes the formdata as first Argument | Function |
true |
- |
| uiSchema | The form's UI-Schema. If not specified, a default UI-Schema will be generated | Object |
false |
- |
| renderInterface | Change the forms UI components | Object |
false |
- |
| presetData | Data that should be loaded into the form. | Object |
false |
- |
| generationOptions | Options for the generation of the UI-Schema if no UI-Schema is provided | Object |
false |
- |
| returnDataAsScopes | Return data as key value pairs with the keys being the scopes as used in the ui schema and the values being the data | Object |
false |
- |
| mapperFunctions | Functions to change JSON- and UI-Schema of fields before rendering | Object |
false |
- |
Can be used as a webcomponent.
If you set action === 'request' and requestUrl in the submit options of the button, the webcomponent will post the form data to the given endpoint in the background.
If either option is not set, the data and the submit options will be emitted as an event with the name submit.
Supported options are:
jsonSchemauiSchemapresetDatareturnDataAsScopes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://unpkg.com/@educorvi/vue-json-form-webcomponent@^3/dist/style.css">
</head>
<body>
<!-- json: Your JSON Schema -->
<!-- ui: Your UI Schema -->
<vue-json-form
jsonSchema='{...}'
uiSchema='{...}'
></vue-json-form>
<script src="https://unpkg.com/@educorvi/vue-json-form-webcomponent/dist/webcomponent@^3/vue-json-form.umd.js"></script>
</body>
</html>A working example can be found in the file webcomponent/webcomponent_test.html.
The form fields themselves are defined in the JSON-Schema. In the UI-Schema, the layout of the form is defined. Fields
are inserted into the form by creating a Control in the UI-Schema and referring to the field in the JSON-Schema with a
json pointer.
Examples
The JSON-Schema must be a valid JSON-Schema. More details on the json-schema can be found here.
The UI-schema must conform to https://educorvi.github.io/vue-json-form/ui-schema-files/ui.schema.json. Its documentation can be found here.
yarn install
(In the according folder)
yarn run dev
(In the according folder)
yarn run build
yarn run doc
Needs python package json-schema-for-humans