Simple Vue Custom Renderer Not Working

General
1

Hi,

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!

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

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

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

export const renderersTextEntry: JsonFormsRendererRegistryEntry = {
  renderer: renderersText,
  tester: rankWith(9999, isStringControl),
};
</script>
2

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?

3

Hi,

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;