Simple Vue Custom Renderer Not Working


I’m trying to create a very simple custom renderer in Vue for strings but somehow I can’t get it to work correctly. My renderer doesn’t throw any errors, but it simply doesn’t show up on my page. When I inspect the DOM, nothing of it gets rendered at all. Anyone know why this is and how to fix it?
You can find my render component below. Thanks!

  <p>{{ "Test" }}</p>
  <v-input />

<script lang="ts">
import {
  type ControlElement,
  type JsonFormsRendererRegistryEntry,
} from "@jsonforms/core";
import {
  type RendererProps,
} from "@jsonforms/vue";
import { defineComponent } from "vue";

const renderersText = defineComponent({
  name: "renderers-text",
  props: {
  setup(props: RendererProps<ControlElement>) {
    return useJsonFormsControl(props);

export const renderersTextEntry: JsonFormsRendererRegistryEntry = {
  renderer: renderersText,
  tester: rankWith(9999, isStringControl),

Hi @ideaconsider,

On a first glance I would definitely expect the renderer to render something.

We had some problems in the past with Vite. Can you try to move the renderersTextEntry into a separate file so that the only export of the SFC is the component itself?


you must also export the defined component "renderersText ", not only the Entry “renderersTextEntry”.

Add this line before the export of the “renderersTextEntry”

export default renderersText;