Examples

Here you will find a few examples on how you can set up your schema and the output it would produce.

Important

We are using a few different example custom components to showcase, but you should use your own! These components are only for demonstration purposes, and are not included with the library.

SchemaForm with useSchemaForm

This example showcases the simplest way to use SchemaForm. It provides the component with a schema in the form of a JavaScript object, and binds the output of the form to the local data userData through useSchemaForm.

Nested schemas

SchemaForm is able to parse and display forms that are based on nested schemas. In the example below, you can see how the work property is an object that uses SchemaForm itself as a component, and provides a schema property of its own.

Further down the tree inside details, yet another level of nested data can be found.

Using an array based schema

SchemaForm allows you to construct the schema also as an array. The name of each field is declared as a model property in each element, instead of it being the key for each property of the object-type schema.

Don't forget to check out the documentation for Array schemas

Conditional computed schemas

In the following example we showcase how a computed property can be used to dynamically generate a schema. When switching the value from the select element from A to B, the related input also changes to reflect the current status of the schema and the form.

Conditional fields with schema

The above example can also be written using the condition schema keyword introduced in 3.1.0.

100 nested inputs

The following example showcases the power of useSchemaForm, and why we decided to drop v-model in favor of an injected state. We recursively nest 100 schemas with input elements inside of them. Updating the v-model binding on the FormText component does not re-trigger a re-render of any part of the generated schema, and neither does updating the schema by adding or removing levels.