Using React components in the panel preview

The CMS Questions
1

We’re using Kirby as a headless CMS for our React (Next.js) front-end, and it would be ideal to simply reuse our components and views in the panel.

The best I’ve found about using React components in Vue comes from this article: Using React components directly in Vue components (with or without Typescript) — Part 2 — Full Tutorial | by Cedric McKinnie | Medium

But this doesn’t take into account the context of Kirby. For example, I’m not finding where new Vue(…) happens, which is where one of the steps in the article takes place.

With all the React component libraries out there, I can’t be the first person to try this, so I thought I’d ask here for any success stories because I’m coming up short on Google and searching the forum…

2

new Vue is called in the main.js file which you can find in the kirby repo on GitHub.

In general, it’s not a good idea to touch the source code, though.

1 Like
3

Indeed, I was really hoping I wouldn’t have to fork Kirby itself :frowning:

But is there any other way?

I can’t be the only one using React components in here, how are other people doing this?

4

I’m not so sure…

Looking at the vuera docs, there seem to be different ways to implement this, so loading vuera as a plugin or one of the other ways mentioned in the docs, I would think that you don’t have to manipulate the source code.

But I am not particularly skilled with React or Vue, nor have I ever ventured into the realm of integration React into Vue or vice versa.

1 Like