This is a set of vanilla renderers for JSON Forms 3.2 for Vue 3. Most renderers are direct ports from the Vue 2 Vuetify renderer set and thus fill the gap of missing renderers from the Vue 3 Vanilla renderer set.
Here is a comparison of all renderers: Example Page
Using npm:
$ npm install @backoffice-plus/jsonforms-vue-vanillaimport {vanillaRenderers, defaultStyles} from "@jsonforms/vue-vanilla";
import {boplusVanillaRenderers, bopStyles} from "@backoffice-plus/jsonforms-vue-vanilla";
const jsonFormRenderers = Object.freeze([
...vanillaRenderers,
...boplusVanillaRenderers,
]);
provide('styles', {...defaultStyles,...bopStyles});https://jsonforms.io/docs/renderer-sets
| JSON Schema | Renderer | overruled Renderer | Vue Vanilla | Vue2 Vuetify | Bo+ Vue Vanilla |
|---|---|---|---|---|---|
| boolean | Toggle | Boolean | ❌ | ✔️ | ✔️ |
| integer | Slider | Integer | ❌ | ✔️ | ✔️ |
| string | Password | String | ❌ | ✔️ | ✔️ |
| Enum | Autocomplete | Enum | ❌ | ✔️ | ✔️ |
| Enum | RadioGroup | Enum | ❌ | ✔️ | ✔️ |
| oneOf (const / title) | Autocomplete | EnumOneOf | ❌ | ✔️ | ✔️ |
| oneOf (const / title) | RadioGroup | EnumOneOf | ❌ | ✔️ | ✔️ |
| Array of objects | Table | ArrayList | ❌ | ✔️ | ✔️ |
| Array of objects | List with Detail | ArrayList | ❌ | ✔️ | ✔️ |
| Array of enums | Multiple Choice | ArrayList | ❌ | ✔️ | ✔️ |
| allOf | Tabs | - | ❌ | ✔️ | ✔️ |
| anyOf | Tabs | - | ❌ | ✔️ | ✔️ |
| Categorization | Tabs | - | ❌ | ✔️ | ✔️ |
| Categorization Stepper | Tabs | - | ❌ | ✔️ | ✔️ |
| const type safety | Const | Enum | ❌ | ✔️ | |
| string (format: time) | Time | Time | ️ ✔️ | ✔️ | |
| string (format: datetime) | DateTime | DateTime | ️ ✔️ | ✔️ |
For JSON Forms 3.0, here is an older version that still contains the Object and OneOf Renderer https://github.com/backoffice-plus/jsonforms-vue-vanilla-boplus/tree/v0.0.10