Tiptap: Nuxt JS document is not defined

Created on 13 Dec 2018 · 10Comments · Source: ueberdosis/tiptap

Hi!
Please help me! Why in nuxt js project error 'document is not defined'?
I tried installing through plugins and ssr: false - not working(

Source

AlexanderBelkevich

Most helpful comment

<template>
  <no-ssr>
    <editor-content :editor="editor" />
  </no-ssr>
</template>

<script>
import { Editor, EditorContent } from 'tiptap'

export default {
  mounted() {
    this.editor = new Editor({
      content: '<p>This is just a boring paragraph</p>'
    })
  },
  components: {
    EditorContent
  },
  data() {
    return {
      editor: null
    }
  },
  beforeDestroy() {
    // Always destroy your editor instance when it's no longer needed
    this.editor.destroy()
  }
}
</script>

hok-wtag on 20 Nov 2019

👍16 🎉4 🚀3

All 10 comments

I'm using tiptap with Nuxt and have gotten it to work by wrapping the editor in a <no-ssr> tag and initializing the editor in the component's mounted rather than in data. I don't have it installed as a plugin, just imported in an editor component

AveryBibeau on 14 Dec 2018

👍4 ❤3

Are you using tiptap-extensions too? The problem appears when using it. In any case, I will try your advice today :)

AlexanderBelkevich on 15 Dec 2018

I'm using tiptap with Nuxt and have gotten it to work by wrapping the editor in a <no-ssr> tag and initializing the editor in the component's mounted rather than in data. I don't have it installed as a plugin, just imported in an editor component

Thanks. It's working! The problem was 'data'

AlexanderBelkevich on 15 Dec 2018

🎉6 👍5

I'm using tiptap with Nuxt and have gotten it to work by wrapping the editor in a <no-ssr> tag and initializing the editor in the component's mounted rather than in data. I don't have it installed as a plugin, just imported in an editor component

Thanks. It's working! The problem was 'data'

@AlexanderBelkevich Please can you tell me how to implement this solution, I've been tried every possible way with no results.
thanks in advance

eslamoo on 25 Oct 2019

<template>
  <no-ssr>
    <editor-content :editor="editor" />
  </no-ssr>
</template>

<script>
import { Editor, EditorContent } from 'tiptap'

export default {
  mounted() {
    this.editor = new Editor({
      content: '<p>This is just a boring paragraph</p>'
    })
  },
  components: {
    EditorContent
  },
  data() {
    return {
      editor: null
    }
  },
  beforeDestroy() {
    // Always destroy your editor instance when it's no longer needed
    this.editor.destroy()
  }
}
</script>

hok-wtag on 20 Nov 2019

👍16 🎉4 🚀3

Hey, I know this issue has been closed for a while, but I think it's worthwhile for anyone referencing this that the <no-ssr> is deprecated in favor of the new <client-only> component for Nuxt < v2.9.0.

You can read the docs here

maxcaplan on 4 Aug 2020

👍2

I know this is a dead issue but has anyone had any luck rendering the contents of the editor at server time? Ran into this issue but unfortunately my use case has me wanting the Editor to render the content on the server.

bmkubia on 1 Sep 2020

@bmkubia I don't quite understand your problem. Are you talking about rendering the full Tip Tap editor on the server-side? Or are you talking about rendering the actual HTML content of the editor server-side?

If you're trying to render the whole editor server-side, it won't work, the editor is strictly client-side. If you just want to render the HTML content of the editor server-side, then you can use Vue's v-html directive

maxcaplan on 2 Sep 2020

@maxcaplan Yes but v-html is prone to XSS, I assumed the tiptap editor takes care of that factor which is why I am displaying the content inside of another Editor instance and would like to on the server side as well.

I guess I also could just write sanitization myself server side but I was hoping this lib had it included.

bmkubia on 3 Sep 2020

@bmkubia That works with the upcoming v2. :) https://github.com/ueberdosis/tiptap/issues/821#issuecomment-686536616