Accepted answer

this is the solution to fix:

  • navigator is undefined
  • window is undefined
  • document is not defined

here is an example on how you should wrap your logic js code

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 () {})

as shown here:

ps: mounted + process.client are kinda redundant because mounted only runs on the client.

also, wrapping your component into <client-only> if you want it to be only client side rendered is also a good idea.

    <p>this will be rendered on both: server + client</p>
      <p>this one will only be rendered on client</p>

the documentation for this one is here:

ps: beware because this client-only tag will only skip the rendering, not the execution, as explained here.

some packages do not support ssr when you import them, for that you could either:

  • use a condition with a dynamic import (if the library is meant to be used later on)
  • directly like this (if you want to load a component like vue-editor)
export default {
  components: {
    [process.client && 'vueeditor']: () => import('vue2-editor'),

Related Query

More Query from same tag