Choosing a library to integrate React components inside Vue

Cristal
1

As the choice has been made to experiment with integrating BlockNote as a WYSIWYG editor in Cristal and XWiki in the future, and BlockNote is a React-only library, we need a way to interface React components inside Cristal which is written in Vue.

We’ve explored a few options:

  • Veaury: well-maintained, we managed to run BlockNote inside Cristal with it. It supports props interfacing, events and nested children (providing a Vue or React component as a child of a React component which is itself displayed inside a Vue component)
  • Vuera is abandoned since late 2023
  • React inside Vue is abandoned since 2023
  • React-Vue is abandoned since early 2018

As you can see, there aren’t a lot of options. The good news is Veaury seems to work nicely. It doesn’t require to set up anything globally (except a plugin in Vite), we basically import React components normally and then wrap them using an utility function that allows us to use it locally in the current Vue component.

EDIT: Also considered maintaining a Vue ↔ React bindings library for BlockNote ourselves, but the problem would be the maintenance cost in the long run. Writing the initial bindings would take quite a bit of time, and it would take even more as BlockNote’s API changes in the upcoming months / years.

If you know of any other library that could be a better option, or if you’re aware of any limitation of Veaury, please let us know :slight_smile:

2 Likes
2

Thanks for the research and explanation!

Side note: I think it would be useful to keep the knowledge you shared here and in API design for making Cristal & XWiki editor-agnostic in a xwiki Design page or the Cristal project documentation.
Down the line, this knowledge will be easier to find and update if it’s on a wiki IMO.

Have a good day!
Lucas C.

1 Like
3

AFAIK, the choice has not been made yet. And I don’t remember any proposal on this forum about it. What we said is that we would do a POC about it and then decide.

1 Like
4

Sorry my message was badly worded ; I meant experimenting with integrating BlockNote. I’ll edit my first message accordingly.

5

That’s the plan ; but I wanted to get some feedback before writing a summary in the wiki :slight_smile:

6

Thanks @ClementEXWiki !
One last point I would like to see discussed. Did you also consider the option where we maintain the react/vue binding ourselves?

7

Good point, I updated my initial post with more infos on that matter :slight_smile:

8

So, to give an update of that subject: Veaury created a few problems during implementation, making the page freeze when some components were nested.

So we tried to make a custom React-in-Vue / Vue-in-React library, and it works flawlessly for now. It is about 300 lines of code and is fully end-to-end typesafe, and will be published on Github once it’s correctly integrated into Cristal :slight_smile: