# Vue (non-typescript) custom renderer binding control

**URL:** <https://jsonforms.discourse.group/t/vue-non-typescript-custom-renderer-binding-control/2632>\
**Category:** General\
**Created:** [March 1, 2025, 12:35am UTC](https://jsonforms.discourse.group/t/vue-non-typescript-custom-renderer-binding-control/2632 "2025-03-01T00:35:02Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![devkram](https://avatars.discourse-cdn.com/v4/letter/d/439d5e/32.png) [@devkram](https://jsonforms.discourse.group/u/devkram)\
**Post date:** [March 1, 2025, 12:35am UTC](https://jsonforms.discourse.group/t/vue-non-typescript-custom-renderer-binding-control/2632/1 "2025-03-01T00:35:02Z")

</div>

I’ve managed to add this custom render in the jsonForm renderer, however I’m a bit lost how to bind the custom renderer. Not sure what to pass as props in the custom-renderer hence it’s blank. In the vue-vanilla it’s something like `...rendererProps<ControlElement>()` I’m guessing it’ll be the same?

Can someone point me to the right direction how to do the binding?

```auto
<json-form :renderers="renderers" :schema="schema" :uischema="uischema" />
const renderers = ref(Object.freeze([
  ...vanillaRenderer,
  {
    tester: rankWith(1, optionIs('custom', true) ),
    renderer: CustomInputRenderer
  }
]))

```

CustomInputRenderer.vue

```auto
<template>
  <div>
    <custom-input @update="onChange"/>
  </div>
</template>

<script>
import { rendererProps, useJsonFormsControl } from '@jsonforms/vue'
import { ControlElement } from '@jsonforms/core'
import { defineComponent } from "vue";

export default defineComponent({
  name: "JsonbRenderer",
  props: {
  },
  setup(props) {
    return useJsonFormsControl(props)
  },
  methods: {
    onChange(event) {
      console.log('Event: ', event)
    }
  }
});
</script>

```

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [March 3, 2025, 8:14am UTC](https://jsonforms.discourse.group/t/vue-non-typescript-custom-renderer-binding-control/2632/2 "2025-03-03T08:14:10Z")

</div>

Hi @devkram,

All renderers receive the [same props](https://github.com/eclipsesource/jsonforms/blob/daa1836efe31d551090ff98d12ee6b23c2f7b656/packages/vue/src/components/DispatchRenderer.vue#L5) as they are invoked by the dispatcher.

> [@devkram](#):
>
> In the vue-vanilla it’s something like `...rendererProps<ControlElement>()` I’m guessing it’ll be the same?

The [`rendererProps` are exported as a helper from `@jsonforms/vue`](https://github.com/eclipsesource/jsonforms/blob/daa1836efe31d551090ff98d12ee6b23c2f7b656/packages/vue/src/jsonFormsCompositions.ts#L62-L95) so you can just reuse them. They are the same for all renderers, as long as you don’t customize the dispatching in your renderer set.