Thanks for reporting! I tried to get a quick grasp via performance debugging in Chrome Dev Tools but seems like it even crashes my chrome instance on that.

I just saw that the NodeViewRenderer takes a lot of time for each component - I don't have a Vue 2 setup now that I could easily test. Do you still have your code around that you could put into a sandbox real quick so I can do my tests on that to compare where and what increases the rendering time that much?

Quick test (which I don't think is reliable) shows that each VueRenderer's constructor takes around 9 to 13ms which adds up real quick on 1500 elements.

Hi @bdbch ,

Thank you for your reply !

For comparison, here is the same content with tiptap vue-2.

I've inspected the vue-3 package and I think the performance problem comes partly from the render method of EditorContent.ts.

`render() {
const vueRenderers: any[] = []

if (this.editor) {
  this.editor.vueRenderers.forEach(vueRenderer => {
    const node = h(
      Teleport,
      {
        to: vueRenderer.teleportElement,
        key: vueRenderer.id,
      },
      h(
        vueRenderer.component as DefineComponent,
        {
          ref: vueRenderer.id,
          ...vueRenderer.props,
        },
      ),
    )

    vueRenderers.push(node)
  })
}

return h(
  'div',
  {
    ref: (el: any) => { this.rootEl = el },
  },
  ...vueRenderers,
)

}`

It appears that with each successive update to add a new node, all previously rendered nodes are rendered each time.

Here a PR Draft

I hope this will help you solve this bug.

Thank you very much for your help!

We are also using tiptap (vue2) in my company and we are starting the process of migrating to vue3. Thank you @Rirax for highlighting this performance issue !
I'm posting to follow this thread, but this could potentially be a hard blocker for us because we currently have clients with several thousand lines documents....

@bdbch Any clues regarding the timeline of this fix ? 🙏

Thanks in advance for your work

No timeline yet – @Rirax send in a PR which I'll check asap when I find time to see if it improves rendering performance and doesn't break anything – after that we'll see to release it in a new minor if everything is working fine.

But can't give a time estimate rn.

Hello everyone,
I'm facing the same issue at my company when moving from tiptap/vue2 to tiptap/vue3.
Thanks for the investigation @Rirax and for the PR.
I hope this will get fixed soon so we can complete our migration, is there still no timeline defined @bdbch ?
Thanks everyone and have a good weekend

Hello, tried to build tiptap with pr from @Rirax and to add it to our project that uses a lot of VueNodeViewRenderer components, unfortunately didn't work for us, the tab just crashes, though it worked almost flawless with vue2 :/
(we use tiptap for big articles, about 2-6mb of json content)
The project itself has almost no getters/watchers, even when I removed them all - the browser tab just freezes.
Anyway, thanks everyone for their hard work, I hope this issue will be resolved sooner or later, since it's a major blocker for transitioning to vue 3.

Hello, tried to build tiptap with pr from @Rirax and to add it to our project that uses a lot of VueNodeViewRenderer components, unfortunately didn't work for us, the tab just crashes, though it worked almost flawless with vue2 :/ (we use tiptap for big articles, about 2-6mb of json content) The project itself has almost no getters/watchers, even when I removed them all - the browser tab just freezes. Anyway, thanks everyone for their hard work, I hope this issue will be resolved sooner or later, since it's a major blocker for transitioning to vue 3.

Yep, same here. Were using it on vue2 and got those issues with vue3. Tried to solve it by myself but no luck for now. Honestly still hope for an update. Thanks for the work again!

Hi! Thanks @Rirax for writing about this problem.
We also use tiptap in our company, and we started having the same problem since move from vue2 to vue3.
Performance on large documents began to suffer greatly, some simply stopped opening because of this. I hope for a fix soon and thanks everyone for your work!

Hello, I also tried integrating Tiptap with the PR from @Rirax into our Vue 3 project and faced similar issues with the browser tab crashing, despite it working well with Vue 2

Hi @bdbch, it's been a month since this thread has been opened and it seems to be a critical issue for several tiptap users for transitioning from vue2 to vue3

Any news on the timeline ? Thanks in advance for your work

I see many problems similar to mine, but I decided to share anyway. A couple of days ago we completed the migration of the project to Vue 3 and started getting tab crashes when there was a large amount of content

Maybe there is some intermediate solution for us? Tried to make a build from pr above, but it did not fix the issue.

Hi! I've also stumbled upon this issue, unfortunately, vue2 performance was much better, it's a major blocker for us also. Hope there is some kind of solution, thank you for all your hard work!