Vue Basic String Custom Renderer

General
4

Hi @adamsilva01,

The renderers are an array of { renderer, tester } pairs. As you only hand over the renderer itself instead of an object containing the renderer and tester, JSON Forms can’t find the tester.

Note also that a renderer set which ONLY consists of the RenderersText renderer will likely also fail as JSON Forms by default auto generates a VerticalLayout UI Schema element for a JSON Schema object. So you should also at least add a layout renderer. See this very related question.

So instead of the renderer you should import the entry. If you are using the types of JSON Forms it should already complain when using the wrong one.

import { entry as renderersTextEntry } from '~/components/renderers/text/RenderersText.vue';
import { JsonFormsRendererRegistryEntry } from '@jsonforms/core';

const renderers: JsonFormsRendererRegistryEntry[] = [
  renderersTextEntry,
  // add your layout renderer entry here
]

In case you are struggling to export the entry from the .vue file: You need to modify the TS module declaration for Vue to declare that entry is also exported. Alternatively you could just define the entry outside of the .vue SFC.