How to write generic components (React, Vue)

ZZ oo — Tue, 11 Nov 2025 06:55:00 +0000

I want to write a component library that can be used directly in the React/Vue framework, but I don't want to write two copies of the code.

I've consulted many resources, and generally speaking, the principle is to extract common logic and then write the corresponding React/Vue components.

For example, introducing and using it like this

Example：

// react
import { ZButton } from "xxxxx/react";
// vue
import { ZButton } from "xxxxx/vue";

I'm wondering if this means creating two separate component libraries, more than doubling the workload. Is there a way to directly import and use the components I write in both React and Vue?

Example：Ideal code

// react/vue
import { ZButton } from "xxxxx"

I've also seen some plugins that can compile my components into the version I want, but I'm worried about compatibility issues, and resolving compatibility issues might be more troublesome than writing the component itself.

Is there any way to solve my problem?

Thank you everyone!!!

DEV Community: ZZ oo

How to write generic components (React, Vue)