Vue ↔ React cheatsheet

Dense on purpose. When you blank on the name of the thing - come here.

Core

Vue	React
SFC .vue	.tsx function component
<template>	JSX return (…)
<script setup>	function body
ref(0)	useState(0)
reactive({…})	useState({…}) / multiple states
computed(() => x)	derive in render: const x = …
watch / watchEffect	useEffect (carefully)
onMounted	useEffect(fn, [])
onUnmounted	effect cleanup return () => …
defineProps	function args / props type
defineEmits	callback props onSomething
provide / inject	Context
composable useX	custom hook useX
$slots / <slot>	children / render props
v-if	&& / ternary / early return
v-for	.map()
:key	key
v-model	value + onChange
class	className
style string/object	style object (camelCase)
template ref	useRef + ref={…}

Routing

Vue Router	React Router	Next App Router
RouterView	Outlet	children in layout.tsx
RouterLink	Link	next/link
useRoute()	useParams / useLocation	useParams / params in page
router.push	navigate()	router.push (next/navigation)

State & data

Vue world	React world
Pinia	Zustand (client)
fetch in Pinia	TanStack Query (server state)
useFetch (Nuxt)	RSC fetch / Query on client
Vuex	please don't start here 🙂

Testing

Vue	React
Vue Test Utils / Testing Library	Testing Library React
@vue/test-utils mount	render()
same Testing Library queries	screen.getByRole(…)

Nuxt ↔ Next (short)

Nuxt	Next
pages/	app/**/page.tsx
layouts/	layout.tsx
middleware/	middleware.ts
server routes	app/api/**/route.ts
modules	packages + your own glue

Keep this tab open for a week. Muscle memory shows up eventually.

-- ł.