I know there are a few questions similar to this but they did not work for me so I am posting this.

I am trying to add jsPlumb into my Nuxtjs/Vuejs application. I did the following steps:

1. npm i jsplumb --save
2. Create a Vuejs page and add the simple code:

<template>
  <client-only>
    <div id="canvas" />
  </client-only>
</template>

<script>
import { jsPlumb } from 'jsplumb'

export default {
  mounted () {
    if (process.client) {
      console.log('MOUNTED - 2')
      jsPlumb.ready(function () {
        console.log('MOUNTED - 3')
      })
    }
  }
}
</script>

I get the error:

ReferenceError
document is not defined

I tried many things which were mentioned but nothing seems to work.

CodePudding user response：

The jsplumb package is not recommended for use now, particularly for new users. @jsplumb/browser-ui is the package for the 5.x release of jsPlumb.

I realise this does not constitute an answer to the question. But 5.x's internal architecture is vastly different to 2.x and it may be the case that 5.x does not have this issue out of the box.

CodePudding user response：

Instead of using process.client I used the process.browser and it worked fine for me. Please refer the link: https://stackoverflow.com/a/69822954/7584240