VJsoneditor does not work with nuxtjs

[rajmondburgaj]

I am trying to use this package but it does not work with nuxtjs. Basically what I did is described below:

npm install v-jsoneditor --save

import VJsoneditor from 'v-jsoneditor'

....

components: {
    VJsoneditor
  }

And the I try to use the component like below:

<VJsoneditor v-model="val" />

but it throws an error as below:

ReferenceError
self is not defined

Also tried to set fetchOnServer: false for that component and still does not work. Also, wrapping the code with tag does not help either.

Any idea how to make this work ?

Referring tot his thread josdejong/jsoneditor#1362 (comment)
seems somebody fixed this issue but not sure he changed the whole project to render on client side or just that particular component.

[rajmondburgaj]

I resolved it following the steps here: #41 (comment)

Basically add in the nuxt.config.js file at the plugins section add:

plugins: {
   { src: '~/plugins/json-editor', mode: 'client' }
}

and of course add a new file named: json-editor.js in the plugins folder and place the content as below:

import Vue from 'vue'
import VJsoneditor from 'v-jsoneditor'
Vue.use(VJsoneditor)

Thou, would be nice to have an example using nuxt js in the official page.

[rajmondburgaj]

Unfortunately the solution did not fully work yet, so, as soon as I did the changes due to immediate refresh of the components without having to do a full page load it works, but as soon as I did a full page load again the same problem.

[PendaGTP]

Hi,

Here is my configuration to use VJsoneditor with NuxtJS :

v-jsoneditor.ts :

import Vue from 'vue';
import VJsoneditor from 'v-jsoneditor';

Vue.component('VJsoneditor', VJsoneditor);

nuxt.config.ts :

plugins: [
    '~/plugins/v-jsoneditor'
  ],

Then I can then use the component, for example :

<v-jsoneditor
    v-model="model"
    :options="options()"
    :plus="false"
    height="100%" 
/>

I hope it helps you