Converting React Components to Vue 3 — MUI/Chakra to Quasar Migration

Template Syntax: JSX vs Vue Single-File Components

The most fundamental difference between React and Vue is how you express your UI. React uses JSX, a JavaScript extension that lets you write HTML-like syntax directly in your component functions. Vue uses Single-File Components (SFCs) with a <template> block for markup, a <script setup> block for logic, and an optional <style> block for scoped CSS.

Event handling. React uses camelCase synthetic events like onClick, onChange, and onSubmit. Vue uses the @ shorthand for v-on: @click, @input, @submit. Vue also provides event modifiers like @click.prevent and @submit.stop that eliminate the need for e.preventDefault() calls.

Two-way binding. React requires you to wire up value and onChange separately for every form input. Vue’s v-model directive handles both in a single attribute. This is especially powerful with Quasar components, where v-model works consistently across inputs, selects, toggles, date pickers, and dialogs.

Conditional rendering. React uses ternary operators and logical && for conditional rendering inline. Vue uses the v-if, v-else-if, and v-else directives, which read more like natural language and are easier to follow in complex conditional trees. For list rendering, React uses .map() while Vue uses v-for.

Component Mapping: MUI to Quasar

Quasar is the most comprehensive Vue 3 component framework, offering 70+ components that cover the same ground as Material UI. Below are the most common component mappings. Use the FrontFamily Converter to automate these conversions.

<Button variant="contained" color="primary"
  onClick={handleSave}>
  Save Changes
</Button>

<q-btn color="primary" label="Save Changes"
  @click="handleSave"
/>

<TextField
  label="Email"
  variant="outlined"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  fullWidth
/>

<q-input
  label="Email"
  outlined
  v-model="email"
  class="full-width"
/>

<Card elevation={2}>
  <CardContent>
    <Typography variant="h6">Title</Typography>
    <Typography variant="body2">Content</Typography>
  </CardContent>
</Card>

<q-card>
  <q-card-section>
    <div class="text-h6">Title</div>
    <div class="text-body2">Content</div>
  </q-card-section>
</q-card>

<Dialog open={isOpen} onClose={handleClose}>
  <DialogTitle>Confirm</DialogTitle>
  <DialogContent>
    Are you sure?
  </DialogContent>
  <DialogActions>
    <Button onClick={handleClose}>Cancel</Button>
  </DialogActions>
</Dialog>

<q-dialog v-model="isOpen">
  <q-card>
    <q-card-section class="text-h6">
      Confirm
    </q-card-section>
    <q-card-section>
      Are you sure?
    </q-card-section>
    <q-card-actions align="right">
      <q-btn flat label="Cancel" v-close-popup />
    </q-card-actions>
  </q-card>
</q-dialog>

<Select
  value={role}
  onChange={(e) => setRole(e.target.value)}
  label="Role">
  <MenuItem value="admin">Admin</MenuItem>
  <MenuItem value="user">User</MenuItem>
</Select>

<q-select
  v-model="role"
  label="Role"
  :options="[
    { label: 'Admin', value: 'admin' },
    { label: 'User', value: 'user' }
  ]"
/>

<Switch
  checked={enabled}
  onChange={(e) => setEnabled(e.target.checked)}
/>

<q-toggle v-model="enabled" />

State Management: React Hooks to Composition API

React and Vue 3 have converged on a similar mental model for state and side effects, but the APIs differ significantly. Understanding these mappings is critical for a successful migration.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

<template>
  <button @click="count++">
    Count: {{ count }}
  </button>
</template>

useEffect(() => {
  fetchUser(userId).then(setUser);
}, [userId]);

useEffect(() => {
  document.title = user?.name ?? '';
  return () => {
    document.title = 'App';
  };
}, [user]);

import { watch, onMounted, onUnmounted } from 'vue';

onMounted(() => {
  fetchUser(userId.value).then(u => user.value = u);
});

watch(userId, (newId) => {
  fetchUser(newId).then(u => user.value = u);
});

watch(user, (u) => {
  document.title = u?.name ?? '';
});

const fullName = useMemo(
  () => `${firstName} ${lastName}`,
  [firstName, lastName]
);

const fullName = computed(
  () => `${firstName.value} ${lastName.value}`
);
// No dependency array needed — Vue tracks
// reactive dependencies automatically.

Key Differences to Watch For

Beyond component and API mappings, there are architectural differences between React and Vue that affect how you structure your migrated application:

Interactive Component Reference

Search any React MUI component to find its Vue Quasar equivalent. Components marked with ⚠ have no direct replacement and require custom implementation.

What Developers Actually Hit

Based on migration reports from engineering teams. These are the problems documentation doesn’t warn you about.

Migration Strategy for Large Codebases

Micro-frontend approach. Unlike migrating between two React component libraries, switching from React to Vue requires running two entirely different frameworks. The most practical approach is a micro-frontend architecture where new features are built in Vue while existing React code continues to run alongside. Tools like Module Federation, single-spa, or even simple iframe embedding (as FrontFamily itself uses) allow both frameworks to coexist in production.

Start with leaf pages. Identify pages or features with minimal shared state. Settings pages, documentation views, and standalone dashboards make excellent migration targets because they have limited inter-component communication. Once your team builds confidence with Vue patterns, tackle the more interconnected features.

Shared state layer. If both React and Vue components need access to the same state, extract your state management into a framework-agnostic layer. A vanilla TypeScript store with event emitters, or a library like Zustand (which works outside React), can serve as a bridge. Both React hooks and Vue composables can subscribe to the same underlying store, ensuring data consistency during the migration period.

Import Changes at a Glance

import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import { Card, CardContent } from '@mui/material';
import { Dialog } from '@mui/material';
import { Select, MenuItem } from '@mui/material';

<!-- Quasar components are globally registered -->
<!-- No imports needed in <template> -->

<script setup>
// Only import composables and utilities
import { useQuasar } from 'quasar';
import { ref, computed } from 'vue';
</script>