jsPlumb integration with Nuxtjs throwing the error document is not defined

Question

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.

Degrease

Does this answer your question? How to fix navigator / window / document is undefined in Nuxt – Omar

@Omar Thanks for your response. But I have tried that answer but it did not work for me. If you check my code its the same. – Degrease

Some solutions here could also be useful: https://mcmap.net/q/298364/-nuxt-application-throwing-error-message-when-using-flickity I guess I tried it last time and it worked. – Omar

@Omar I tried everything but nothing seem to work for me. I have modified the code can you please check and let me know what am I doing wrong? I checked many answers and all seem to address the same but for some reason it does not work for me. – Degrease

Answer 1

Instead of using process.client I used the process.browser and it worked fine for me. Please refer the link: https://mcmap.net/q/298365/-how-to-get-started-with-the-jsplumb-browser-ui-in-the-vuejs-nuxtjs-application

Degrease