Overview
Moving from Vue 2 to React is a framework rewrite, not a data migration - and it comes with a deadline of its own, since Vue 2 has reached its official end-of-life date and, per Vue's own blog, "will no longer receive new features, updates, or fixes." Vue 2 apps are typically written with the Options API - a component definition object with data(), methods, and computed - while React writes components as JavaScript functions using Hooks. This pair also has the weakest tooling story among comparable framework migrations: the one interop library built specifically for Vue 2 and React, vuera, is now archived, and its recommended successor doesn't support Vue 2 at all. There's no automated code converter either way, so plan for a manual, component-by-component rewrite.
This guide covers moving from Vue to React — see each platform's release history and version notes on its technology page.
Want a plan tailored to your Vue 2 → React migration?
Get my planWhat transfers cleanly from Vue 2 to React
- Props and events follow the same shape on both sides even though the syntax differs: Vue 2's Options-API props (declared via the
propsoption, passed as:prop="value"attributes) and event emission viathis.$emit(...)correspond to React's JSX-attribute props and callback-prop pattern for child-to-parent communication - the concept carries across directly. - Vue's
<slot>and React'schildrenprop are the same mechanism for parent-supplied child content, so any component built around composing children maps onto React's children pattern without a conceptual rewrite. - Routing has a direct role-equivalent on each side: Vue Router (the official router, maintained by the Vue core team, with a 3.x line specifically compatible with Vue 2) and React Router (a separate, community/open-governance project React's own docs recommend for new projects) both provide route matching and nested/dynamic routes, so the routing structure of an app carries across even though the code doesn't.
- Global state management has a like-for-like named target if the app already uses Pinia rather than the older Vuex: Pinia "works with both Vue 2 and Vue 3" per Vue's own docs and is the officially recommended state library, occupying the same role Redux Toolkit does for React as its official, recommended Redux toolkit.
- Animation has a direct built-in-to-library correspondence: Vue's built-in
<Transition>component, available since Vue 2, orchestrates enter/leave animation the way Motion (formerly Framer Motion) does for React - a named target to migrate to, even though one is built into the framework and the other is a separate library.
What does not transfer
- There is no official or actively-maintained Vue-to-React codemod. React's
react-codemodcollection only updates React-internal API usage (class-to-hooks patterns, PropTypes, lifecycle renames) and has no ability to import from or convert Vue code. - The interop library built specifically for this pair, vuera - whose own docs describe it as "Vue in React, React in Vue," built against Vue 2 syntax - is archived, with the maintainer's own note recommending alternatives. Its suggested successor, veaury, dropped Vue 2 support entirely and is Vue-3-only, so the actively-maintained interop path available to other Vue/React pairs isn't available here.
- Vue 2's Options API (
data(),methods,computed) and React's Hooks-based function components are structurally different state models, not a mechanical translation - each component's state logic has to be rewritten in React's model, not translated line by line. - Vue 2 itself is frozen: it has reached its official end-of-life date and, per Vue's own blog, will no longer receive new features, updates, or fixes, so package managers will keep showing deprecation warnings on it regardless of migration progress - that's a fact to plan around, not something the React rewrite fixes on its own.
Effort drivers
- Whether the team can stage the migration through an interop layer at all - since vuera (the one Vue-2-specific option) is archived and its suggested replacement doesn't support Vue 2, the realistic staged routes are single-spa (a framework-agnostic micro-frontend approach) or first upgrading to Vue 3 via the
@vue/compatmigration build before considering any Vue-3-only interop - each adds its own scope beyond a straight rewrite. - How much Options-API component logic (
data(),methods,computed) the app has, since it must be manually rewritten into React's Hooks model - there's no codemod to automate any part of this. - How much of the app depends on Vue 2-era Vue CLI, the webpack-based toolchain Vue's own current docs describe as "in maintenance mode" - that tooling doesn't converge with React's build-tool recommendations and is typically replaced rather than upgraded.
- Whether Vue 2's end-of-life deprecation warnings are already surfacing in the app's dependency tree, since that adds pressure to complete the rewrite rather than pause mid-migration on a frozen framework version.
Recommended approach
Because the one interop library built for this exact pair (vuera) is archived and its recommended successor (veaury) doesn't support Vue 2, don't plan around live component-level interop the way you could for a Vue-3-sourced migration. The realistic staged option is single-spa - confirmed by its own docs to support both Vue and React - which mounts each framework's app as an independent micro-frontend, letting you migrate route by route or feature by feature regardless of Vue version.
A team specifically wanting the kind of interop vuera once offered would need to first upgrade the app to Vue 3 via the @vue/compat migration build (which only handles the Vue 2-to-3 step, and is explicitly not an automatic code-rewriting tool) before considering Vue-3-only veaury-based staging as a second step - unnecessary overhead if you're going straight to a full rewrite.
Otherwise, treat this as a manual, component-by-component rewrite: convert each Options-API component's data()/methods/computed into React's Hooks model, translate this.$emit(...) event handling into React's callback-prop pattern, and rebuild routing on React Router rather than porting Vue Router 3.x configuration directly. Move off Vue CLI's webpack-based tooling (in maintenance mode) onto React's recommended build path as part of the same effort, since the two ecosystems' build tooling doesn't converge for this pair the way it does for some others.
Reuse named ecosystem equivalents on the React side where a direct role-equivalent exists: Redux Toolkit for global state (matching Pinia's official role, if the app already uses Pinia rather than Vuex), React Testing Library for tests, React Hook Form for forms, and Motion for the animation Vue's built-in <Transition> currently handles. Given Vue 2's frozen, end-of-life status, budget real time and priority into the plan rather than treating it as an optional cleanup.
FAQ
- Is there a tool that automatically converts Vue 2 code to React?
- No. There's no official or actively-maintained Vue-to-React codemod, and React's react-codemod collection only updates React-internal API usage - it can't import from Vue at all. Migration is manual, component by component.
- Can I use an interop library to run Vue 2 and React together during migration?
- There used to be one built for exactly this pair - vuera - but it's now archived, and its recommended successor, veaury, dropped Vue 2 support entirely and only works with Vue 3. The realistic staged option for Vue 2 specifically is single-spa, a micro-frontend framework that mounts both frameworks side by side and lets you migrate route by route.
- Should I upgrade to Vue 3 before migrating to React?
- It's optional, not required. Vue's own
@vue/compatmigration build helps a Vue 2 app become Vue-3-compatible, but it's explicitly not an automatic code-rewriting tool and only covers the Vue 2-to-3 step, not the move to React - it only makes sense as an intermediate stop if you specifically want to use veaury's Vue-3-only interop afterward. - What's the React equivalent of Vue 2's Options API?
- React's Hooks-based function components. There's no automated conversion - each component's data()/methods/computed has to be manually rewritten using Hooks like useState.
- Why does a Vue 2 to React migration need to happen now?
- Vue 2 has reached its official end-of-life date - per Vue's own blog, it "will no longer receive new features, updates, or fixes," and package managers will keep showing deprecation warnings on it indefinitely.
Ready to see what this actually takes?
Get my plan