How to use JsonForms in Vue 2 app (Options API)

I want to use the JsonForms Vue component in a Vue 2 app. As a first test, I copied all the relevant imports and data definitions from the Vue 2 seed sample app in one of my components. But the JsonForms component is not rendered and the console log show the following error:

[Vue warn]: Error in render: “TypeError: Cannot read properties of undefined (reading ‘renderers’)”

Is the fact that my Vue 2 app is using the Options API maybe the problem and if yes, how do I solve this?

Hi @jos,

using the options API outside of JSON Forms is completely fine of course. However as JSON Forms internally uses the composition API you must install the composition API plugin into your Vue2 application, otherwise it will not work.

Hi @sdirix ,

I had installed the @vue/composition-api package, but you called it “plugin” and that pointed me to the fact that I also have to add a few lines to main.js, like Vue.use(VueCompositionAPI). It now works and I’ll further investigate it! Thanks for your quick answer.


Hi @jos,

In case it’s interesting to you, there is also a Vue2/Vuetify renderer set that we are working on. It’s in development but I’m using in production, nearly!

i am here to know about how to use jsonForms in vue 2 app for my site lesco bill that i need vue for

Hi! Have a look at our JSON Forms Vue seed.