Tiptap: ReferenceError document is not defined

[jeverduzco]

I'm trying to use the editor with Nuxt.js but the application returns this error and doesn't start:

Error: ReferenceError document is not defined
File: node_modulestiptap\disttiptap.common.js
Line 850: this.element = document.createElement('div');

Any idea?

[chalecki]

@jeverduzco create a new editor instance in a Mounted method

data() {
    return {
      editor: null,
    }
  },
  mounted() {
    this.editor = new Editor({
      content: '<p>This is just a boring paragraph</p>',
    })
  }

[philippkuehn]

Please provide a codesandbox

[tvld]

@philippkuehn It will help to make a small note about Nuxt in the readme; just a copy of the suggestion of @chalecki will work nicely I think ))

[shaunc]

FWIW, I was getting this message while using the nuxt Composition API. Was about to open a new issue, when I stumbled on something that works for me. In addition to wrapping in <client-only>:

  setup ({post}: {post: Post}) {
    const editor = ref<Editor>()
    onMounted(() => {
      editor.value = new Editor({content: post.html || ""})
    })
    onBeforeUnmount(() => {
      if (editor.value !== undefined) {
        editor.value.destroy()
      }
    })
    return { editor }
  },

[sg1asgard]

FWIW, I was getting this message while using the nuxt Composition API. Was about to open a new issue, when I stumbled on something that works for me. In addition to wrapping in <client-only>:

  setup ({post}: {post: Post}) {
    const editor = ref<Editor>()
    onMounted(() => {
      editor.value = new Editor({content: post.html || ""})
    })
    onBeforeUnmount(() => {
      if (editor.value !== undefined) {
        editor.value.destroy()
      }
    })
    return { editor }
  },

@shaunc Where exactly do I copy/paste the setup(){} in my vue component?
I'm using Nuxt with Typescript, just so you know.

Much appreciated.