# 'No applicable renderer found' error when auto generating uischema for schema with nested object (vue)

**URL:** <https://jsonforms.discourse.group/t/no-applicable-renderer-found-error-when-auto-generating-uischema-for-schema-with-nested-object-vue/334>\
**Category:** General\
**Created:** [August 11, 2021, 3:06pm UTC](https://jsonforms.discourse.group/t/no-applicable-renderer-found-error-when-auto-generating-uischema-for-schema-with-nested-object-vue/334 "2021-08-11T15:06:29Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![hugokhf](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/hugokhf/32/118_2.png) [@hugokhf](https://jsonforms.discourse.group/u/hugokhf)\
**Post date:** [August 11, 2021, 3:06pm UTC](https://jsonforms.discourse.group/t/no-applicable-renderer-found-error-when-auto-generating-uischema-for-schema-with-nested-object-vue/334/1 "2021-08-11T15:06:29Z")

</div>

Hi,

I am trying to use the automatically generated uischema through only the schema.  
Using some simple schema as an example below, the input field for ‘name’ can be rendered, but below that the long description object just shows ‘No applicable renderer found.’

```auto
schema= {
  'properties': {
    'name': {
      'type': "string",
      'minLength': 1,
      'description': "The task's name"
    },
    'description': {
      'title': "Long Description",
      'type': "object",
      'required':[
        "leader",
        "estimated_price",
        "status"
      ],
      "properties":{
        "leader":{
          "type":"string"
        },
        "estimated_price":{
          "type":"number"
        },
        "status":{
          "type":"boolean"
        }
      }
    }
  }
}

```

I am just copying the vue2 seed example on how they declare renderer in my example:  
([jsonforms-vue-seed/src/App.vue at vue2 · eclipsesource/jsonforms-vue-seed · GitHub](https://github.com/eclipsesource/jsonforms-vue-seed/blob/vue2/src/App.vue))

```auto
const renderers = [
  ...vanillaRenderers
  // here you can add custom renderers
];
//under data()
renderers: Object.freeze(renderers)

```

Am I doing something wrong? Should I be using a custom renderer? I know I can probably build a uischema manually to create the form properly, but I want to avoid that if possible

---

<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:** [August 11, 2021, 3:36pm UTC](https://jsonforms.discourse.group/t/no-applicable-renderer-found-error-when-auto-generating-uischema-for-schema-with-nested-object-vue/334/2 "2021-08-11T15:36:15Z")

</div>

Hi @hugokhf,

the problem is that we don’t offer an `object` renderer at the moment, see also [here](https://jsonforms.io/docs/renderer-sets). The ui schema generator just generates a `Control` for each property including `description`. The rendering then “fails” as there is no renderer handling the `type: "object"` schema.

To solve this you can implement your own `object` renderer which should be rather straightforward. You can basically copy the [GroupRenderer](https://github.com/eclipsesource/jsonforms/blob/ba6bdc5a93044a872285cd71ed40d9a54f437561/packages/vue/vue-vanilla/src/layouts/GroupRenderer.vue), connect it with the [useJsonFormsControlWithDetail composition](https://github.com/eclipsesource/jsonforms/blob/ba6bdc5a93044a872285cd71ed40d9a54f437561/packages/vue/vue/src/jsonFormsCompositions.ts#L210-L216) (therefore also use `control` instead of `layout` to refer to the computed props) and use `findUiSchema` to find or generate the sub ui schema, like in the [React Material object renderer](https://github.com/eclipsesource/jsonforms/blob/ba6bdc5a93044a872285cd71ed40d9a54f437561/packages/material/src/complex/MaterialObjectRenderer.tsx#L52-L60).

Edit: We now also offer an object renderer, see [here](https://jsonforms.discourse.group/t/no-applicable-renderer-found-error-when-auto-generating-uischema-for-schema-with-nested-object-vue/334/12).

---

<div class="post-metadata">

**Author:** ![hugokhf](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/hugokhf/32/118_2.png) [@hugokhf](https://jsonforms.discourse.group/u/hugokhf)\
**Post date:** [August 11, 2021, 5:12pm UTC](https://jsonforms.discourse.group/t/no-applicable-renderer-found-error-when-auto-generating-uischema-for-schema-with-nested-object-vue/334/3 "2021-08-11T17:12:10Z")

</div>

thanks a lot for the reply.

so since renderer do not support object, if I don’t create a custom one, but instead specify the uischema dynamically (i.e. parsing and storing properties found in schema manually, then create a function to push each properties as the ‘scope’ into the elements array within uischema)  
I assume that will also do the job the same? Is that correct?

Thanks in advance

---

<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:** [August 12, 2021, 5:35am UTC](https://jsonforms.discourse.group/t/no-applicable-renderer-found-error-when-auto-generating-uischema-for-schema-with-nested-object-vue/334/4 "2021-08-12T05:35:49Z")

</div>

Yes absolutely. As a starting point you can copy the [generator code from JSON Forms](https://github.com/eclipsesource/jsonforms/blob/ba6bdc5a93044a872285cd71ed40d9a54f437561/packages/core/src/generators/uischema.ts) and adapt it to your needs.

---

<div class="post-metadata">

**Author:** ![bwl21](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/bwl21/32/228_2.png) [@bwl21](https://jsonforms.discourse.group/u/bwl21)\
**Post date:** [December 24, 2021, 9:51am UTC](https://jsonforms.discourse.group/t/no-applicable-renderer-found-error-when-auto-generating-uischema-for-schema-with-nested-object-vue/334/5 "2021-12-24T09:51:39Z")

</div>

did someone meanwhile implement such a generic object reanderer?

---

<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:** [January 3, 2022, 9:43am UTC](https://jsonforms.discourse.group/t/no-applicable-renderer-found-error-when-auto-generating-uischema-for-schema-with-nested-object-vue/334/6 "2022-01-03T09:43:00Z")

</div>

Hi @bwl21, not yet for the Vanilla renderer set, however the `@jsonforms/vue2-vuetify` [has such a renderer](https://github.com/eclipsesource/jsonforms-vuetify-renderers/blob/5019542992174ba04e95a22f0e4e9d7d9a9081d8/vue2-vuetify/src/complex/ObjectRenderer.vue).

---

<div class="post-metadata">

**Author:** ![bwl21](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/bwl21/32/228_2.png) [@bwl21](https://jsonforms.discourse.group/u/bwl21)\
**Post date:** [January 3, 2022, 11:35am UTC](https://jsonforms.discourse.group/t/no-applicable-renderer-found-error-when-auto-generating-uischema-for-schema-with-nested-object-vue/334/7 "2022-01-03T11:35:49Z")

</div>

@sdirix thank you very much for the hint. Can I use this with with vue3 as well. I started my project with the jsonforms-vue-seed.

---

<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:** [January 3, 2022, 2:55pm UTC](https://jsonforms.discourse.group/t/no-applicable-renderer-found-error-when-auto-generating-uischema-for-schema-with-nested-object-vue/334/8 "2022-01-03T14:55:03Z")

</div>

Sadly no. Vuetify for Vue 3 is a complete rewrite and not compatible to Vue 2. So we probably need a complete new renderer set, i.e. `@jsonforms/vue3-vuetify` or `@jsonforms/vue-vuetify` for this.

---

<div class="post-metadata">

**Author:** ![svnt](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/svnt/32/360_2.png) [@svnt](https://jsonforms.discourse.group/u/svnt)\
**Post date:** [June 16, 2022, 1:58pm UTC](https://jsonforms.discourse.group/t/no-applicable-renderer-found-error-when-auto-generating-uischema-for-schema-with-nested-object-vue/334/9 "2022-06-16T13:58:26Z")

</div>

Hello,

I’m new with VUE3 and jsonForms so a simple question:

is there any example or tutorial out there how to implement a own control renderer in due-vanilla (VUE3)?

I’m lost,  
svnt

---

<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:** [June 17, 2022, 3:07pm UTC](https://jsonforms.discourse.group/t/no-applicable-renderer-found-error-when-auto-generating-uischema-for-schema-with-nested-object-vue/334/10 "2022-06-17T15:07:33Z")

</div>

Hi @svnt,

Please create a new question instead of adding to an existing one.

There is no difference between custom renderers and the off-the-shelf renderers. So feel free to look through [the code base](https://github.com/eclipsesource/jsonforms/tree/413b9767ea8e2c0b6adb3919f5e6b76263d4be31/packages/vue/vue-vanilla/src/controls). You might want to copy an existing one and modify it to your liking to get going (e.g. a password-string renderer). There is also a more detailed guide as part of the Vue readme, [see here](https://github.com/eclipsesource/jsonforms/tree/413b9767ea8e2c0b6adb3919f5e6b76263d4be31/packages/vue/vue).

---

<div class="post-metadata">

**Author:** ![Dybbis](https://avatars.discourse-cdn.com/v4/letter/d/fbc32d/32.png) [@Dybbis](https://jsonforms.discourse.group/u/Dybbis)\
**Post date:** [January 9, 2023, 3:06pm UTC](https://jsonforms.discourse.group/t/no-applicable-renderer-found-error-when-auto-generating-uischema-for-schema-with-nested-object-vue/334/11 "2023-01-09T15:06:39Z")

</div>

Old issue, but I had the same problem and did what @sdirix said, here is the result (typescript):

```auto
<template>
  <fieldset v-if="control.visible">
    <legend v-if="control.label">
      {{ control.label }}
    </legend>
    <dispatch-renderer
      :schema="control.schema"
      :uischema="generateUISchema(control)"
      :path="control.path"
      :enabled="control.enabled"
      :renderers="control.renderers"
      :cells="control.cells"
    />
  </fieldset>
</template>

<script lang="ts">
import {
  JsonFormsRendererRegistryEntry,
  ControlWithDetailProps,
  ControlElement,
  rankWith,
  isObjectControl,
  findUISchema,
} from '@jsonforms/core';
import { defineComponent, shallowRef } from 'vue';
import {
  DispatchRenderer,
  rendererProps,
  RendererProps,
  useJsonFormsControlWithDetail,
} from '@jsonforms/vue';

const layoutRenderer = defineComponent({
  name: 'object-renderer',
  components: {
    DispatchRenderer,
  },
  props: {
    ...rendererProps<ControlElement>(),
  },
  methods: {
    generateUISchema(control: ControlWithDetailProps) {
      control.uischemas = control.uischemas ? control.uischemas : [];

      return findUISchema(
        control.uischemas,
        control.schema,
        control.uischema.scope,
        control.path,
        'Group',
        control.uischema,
        control.rootSchema
      );
    },
  },
  setup(props: RendererProps<ControlElement>) {
    return useJsonFormsControlWithDetail(props);
  },
});

export default layoutRenderer;

export const entry: JsonFormsRendererRegistryEntry = {
  renderer: shallowRef(layoutRenderer),
  tester: rankWith(1, isObjectControl),
};
</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:** [July 24, 2023, 11:14am UTC](https://jsonforms.discourse.group/t/no-applicable-renderer-found-error-when-auto-generating-uischema-for-schema-with-nested-object-vue/334/12 "2023-07-24T11:14:25Z")

</div>

Starting with `3.1.1-alpha.0` we have an object renderer available for Vue 3 [thanks to a community contribution](https://github.com/eclipsesource/jsonforms/pull/2151).