jsplumb in Nuxt app throws document is not defined

Question

I am planning to use jsplumb in my app

my current code looks like this

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

<script>
import { jsPlumb } from 'jsplumb'

export default {
  name: 'JsPlumb',
  auth: false,
  mounted() {
    jsPlumb.ready(function () {})
  }
}
</script>

when I run my app, this throws an error of document is not defined. I already found out that jsplumb wont work on SSR. How can I achieve it to use import for jsplumb that it wont throw an error. Is there a dynamic import in nuxt that only imports the library in non-ssr?

Answer 1

Exact same question as here: https://stackoverflow.com/a/67751550/8816585

<script>
import { jsPlumb } from 'jsplumb' // client-side library only, no SSR support

export default {
  mounted() {
    if (process.client) {
      // your JS code here like >> jsPlumb.ready(function () {})
    }
  },
}
</script>

I've edited the answer there to have all the needed details.

Answer 2

If anyone else if trying even after process.client not working then try process.browser because I guess the client has been changed. Best way is to do console.log(process) and check the variables present in that and based on that make the decision.

<script>
  console.log(process)
  console.log(process.browser)
</script>