Improve the Nuxt.js integration

We see that a lot of you are using tiptap with Nuxt.js, so we want to improve the experience with that.

Client Side Rendering for the Editor

It’s not obvious that tiptap needs to be executed on the client side. It’s required to wrap the editor in an <client-only /> component, but it’s easy to forget.

• Throw a helpful exception if tiptap is rendered on the server

Source: #131

Server Side Rendering for the Content

It’s already possible to render the tiptap content in a read-only instance, that should help for the use in apps. If you’re using tiptap to write a blog post, you’d want to render the content on the server side to deliver plain HTML to user. Plain HTML can be easily indexed by Google and others, viewed without JavaScript and so on.

• Provide an easy way to render the content on the server side

Source: https://github.com/ueberdosis/tiptap/issues/547#issuecomment-685251674

Nuxt.js Integration Guide

There are a few issues using tiptap with Nuxt.js for the first time. You need to understand the difference between client side and server side rendering, you shouldn’t create the instance in the data() method (see below) and probably more. A short guide would probably help to get things right easier.

• Add a Nuxt.js Integration Guide to the documentation

What else?

I don’t have much experience with Nuxt.js. Is there anything that you have been missing?

Would love to hear your ideas how we can improve the integration.

[hanspagel]

Just wanted to chime in and say that I got the rendering working in tiptap 2. It looks like that:

import { generateHtml } from '@tiptap/core'

const doc = {
  'type': 'document',
  'content': [{
    'type': 'paragraph',
    'attrs': {
      'align': 'left'
    },
    'content': [{
      'type': 'text',
      'text': 'My sample text'
    }]
  }]
}

const extensions = […]

const html = generateHtml(doc, extensions)

That makes it possible to render the HTML without an actual tiptap instance. The current implementation still needs a document, but I’m going to add JSDOM support (needed when there is no actual window). That’ll bring this feature to the server side, e. g. for Nuxt.js.

Hope you’re all as hyped about tiptap 2 as I am. 😅

[hanspagel]

Does that help? https://www.tiptap.dev/api/utilities/html

If you encounter an issue with that utility, would you mind to create a new issue with a detailed error (+ stack trace)? Happy to help.