Notes for Nuxt

[ManUtopiK]

Not really an issue. Just notes. Here a working demo.

Add typescript

We need to add typescript in dev dependencies otherwise Nuxt complains about VueNodeViewProps. Don't know why, I thought that Nuxt already embed typescript.

pnpm add -D typescript

Set client only

As Nuxt build the app in SSR, we need to rename editor.vue to editor.client.vue, or wrap the ProseKit component with the <client-only>. Otherwise, the html of prosekit is provided at build time and components like inline menu or block handle doesn't trigger after hydration.

Add button reset

Somewhere your style, add :

button {
  border: none;
}

[ManUtopiK]

In fact there is an issue. From the demo bellow, write something in the editor and open the console to see an error :

This error didn't happen with 0.6.10. I've take a look but don't understand where it comes from. This error doesn't appear when we remove all components : inline menu, block handle... In fact, it's caused by const editor = useEditor<EditorExtension>({ update: true }). Removing update: true don't trigger this error, but break updating the content.

[ManUtopiK]

Wrapping in an onMounted prevent this issue :

let editor: any
onMounted(() => {
  editor = useEditor<EditorExtension>({ update: true })
})

[ocavue]

We need to add typescript in dev dependencies otherwise Nuxt complains about VueNodeViewProps.

I'm not a Nuxt expert, but I think adding typescript in dev dependencies is a good idea in general for any TypeScript projects. Explicit is better than implicit.

---

The html of prosekit is provided at build time and components like inline menu or block handle doesn't trigger after hydration.

In general, for a heavy component that depends on browser APIs like rich-text editor, it's a good idea to skip server-side rendering for it.

However, I don't understand why only the inline menu and block handle are broken. It's interesting and I will investigate it.

---

Somewhere your style, add:

button {
  border: none;
}

I don't want to alter the global styles, but I can add border-transparent to every needed component.

---

Uncaught (in promise) Error: Editor is already mounted

I will investigate it.

[ManUtopiK]

My onMounted hack is not ideal, all commands no longer work. Still with Nuxt, I've rollback to 0.6.10 and confirm that the Error: Editor is already mounted doesn't occur.