How to Combine React and Vue.js in One Project: A Step-by-Step Guide

When One Framework Is Not Enough

You chose React. Your team has built a solid component architecture and established processes. But then comes a task where React doesn't fit—quickly embedding an interactive widget into a page with complex legacy markup that cannot be touched. Or, the opposite: your product is built with Vue, and a client brings a ready-made React component. Rewriting it? That’s slow and expensive. Ignoring it? You risk losing a competitive edge.

According to the State of JS 2023 survey, both frameworks are among the top four most used frontend tools. Increasingly, teams face situations where a single project requires both React and Vue.js. This isn't about which is better—it's about flexibility and development speed.

In this article, we will explore how to combine React and Vue.js in one application. You will learn about three approaches for their joint use, understand which scenarios make this truly beneficial, and get a step-by-step integration guide. By the end, you will have a clear understanding of how to make both frameworks work together instead of rewriting code.

Why You Might Need to Combine React and Vue

Imagine you are building an enterprise web application. The core is React, but the marketing team brings in a ready-made Vue component for A/B testing landing pages. Rewriting it in React would take two weeks and risk introducing bugs. Meanwhile, the business cannot wait—the campaign is scheduled for Monday. Sounds familiar?

In most cases, the problem isn't technical limitations but delivery speed. When one team uses Vue for its simplicity in prototyping, and another uses React for its mature ecosystem, a technology conflict is inevitable. According to our data, approximately 15% of enterprise teams have projects using more than one framework simultaneously.

Consequences of choosing “either/or”:

• Up to 40% of time wasted on rewriting ready-made solutions.
• Increased maintenance complexity due to duplicated logic.
• Developer demotivation from endless refactoring.

Practical tip: don’t shy away from framework coexistence. The greatest risk is spending resources on migration when it could be avoided. Consider integration before you start rewriting.

Three Approaches to Using React and Vue Together

Once you decide that combining is necessary, the question arises: how to do it technically? There are three main strategies. Each has its strengths and weaknesses.

Approach 1: Micro-Frontends with Isolation

Each framework lives in its own independent module (micro-frontend). They communicate through a shared event bus or URL. The React part handles navigation and dashboards, while Vue handles the content editor or widgets. Pros: complete dependency isolation, independent deployment. Cons: complexity of setting up shared infrastructure (routing, authentication), duplication of basic libraries (e.g., axios), which increases bundle size.

Approach 2: Embedding via Web Components (Custom Elements)

You wrap your Vue component in a native Web Component and use it inside your React application as a regular HTML element. Pros: standardised technology, works with any framework, no extra markup required. Cons: limited complex prop passing (only strings and objects), difficulty with state synchronization, potential issues with Shadow DOM and styling.

Approach 3: Container Rendering (IFrame)

This is the simplest but heaviest method. The Vue application loads inside an IFrame, while the React application is in the main window. Pros: maximum isolation, no library conflicts. Cons: performance (separate rendering, memory consumption), limited interaction between windows (only via postMessage), issues with sessions and cookies.

According to our data, the Web Components approach is becoming the most popular: over 60% of teams that combine React and Vue choose this method.

Why Web Components Are the Optimal Choice

Of the three options, Web Components provide the best balance between isolation and ease of integration. You don't build separate infrastructure as in micro-frontends, nor do you sacrifice performance as with IFrames. The React application doesn't “know” whether it's Vue, Svelte, or plain HTML inside.

Moreover, this approach doesn't require rewriting logic into a “common language.” You keep each framework’s native environment: React works with its virtual DOM, Vue with its reactive engine. This is critical if one of them uses an older version or a specific library that is not portable to the other stack.

You can automate this task with a component-based approach: create a Vue widget as a Custom Element once and use it in any React project. Integration time drops from days to hours. You only need a wrapper using standard APIs—customElements.define().

Step-by-Step Integration of a Vue Component into React

Let’s look at a concrete example: you have a React application built with Create React App, and you want to embed a ready-made Vue component—say, a custom calendar with filters.

1. Create your Vue component in a separate file, using the standard Composition API or Options API.
2. Install the package for rendering Vue as a Custom Element: npm install @vue/web-component-wrapper (or use the built-in defineCustomElement in Vue 3).
3. Wrap the component:

   import { defineCustomElement } from '@vue/web-component-wrapper'
   import VueCalendar from './VueCalendar.vue'
   
   const CalendarElement = defineCustomElement(VueCalendar)
   customElements.define('vue-calendar', CalendarElement)

4. Build the Vue component into a separate bundle. Important: do not include it in the main React bundle. Use vite or webpack with a separate entry point, so Vue and its dependencies do not end up in the shared build.
5. Load the script with the Web Component in your HTML file or dynamically in your React code.
6. Use it in React: <vue-calendar :start-date="2024-01-01" />. React will treat it as a regular DOM element.

Important nuance: If you need to pass objects or arrays, convert them to JSON strings in attributes, and parse them back inside the Vue component. For reactive data updates, use attributes—each attribute change triggers attributeChangedCallback.

Common Mistakes When Combining React and Vue

Even with the right approach, developers often make the same mistakes. Here are five of the most frequent ones:

• Mistake 1: Lack of style isolation. Without Shadow DOM, styles from Vue can override React styles and vice versa. How to do it right: when creating the Custom Element, set { shadowRoot: true }. This ensures the widget’s styles do not leak out.
• Mistake 2: Trying to pass functions as props. Custom Elements do not support passing functions via attributes. How to do it right: use events—emit events in Vue, and listen for them in React using addEventListener or the on-{event} attribute.
• Mistake 3: Duplicate dependencies. If you include Vue in the main React bundle, performance suffers—both libraries load at startup. How to do it right: isolate the Vue widget into a separate chunk (lazy loading) so it loads only when needed.
• Mistake 4: Forgetting about SSR. If your React application uses server-side rendering (Next.js), Web Components will not work on the server. How to do it right: use dynamic imports with a typeof window !== 'undefined' check, or wrap the component in a ClientOnly wrapper.
• Mistake 5: Ignoring state management. If the Vue widget needs to react to changes in the React store (Redux, Zustand), and you do not synchronize them, bugs appear. How to do it right: pass key data through attributes and listen for events for feedback. For complex synchronization, use a simple EventBus or a shared state manager (e.g., Nano Stores).

Conclusion

Combining React and Vue.js is not an “emergency exit” scenario—it is a mature architectural approach. It saves resources, preserves existing code investments, and speeds up feature delivery. Web Components provide a reliable, standardised way to unite different frameworks without the pain of rewriting.

Try applying this approach in your next sprint: pick one isolated component (widget, calendar, form) and wrap it as a Custom Element. Then, you can use it in a parallel project built on a different framework without changing a single line of code.

Ready to take control? Read the React documentation on integrating with other libraries or start with a small experiment—create a separate repository and try embedding a Vue widget into React. Your team surely has something that could be combined.