Refactoring for Maintainability in Ryuu-no-Mi/Gestion-de-flotas

Complexity in UI components often creeps in silently. When a table component and its associated form start growing, it becomes difficult to maintain state and layout. In our work on the Ryuu-no-Mi/Gestion-de-flotas project, we recently focused on decoupling these concerns to improve developer experience and component stability.

The Problem with Monolithic Components

Initially, our dashboard components handled everything: data fetching, layout logic, and validation state. As the project scaled, this made testing and updates increasingly hazardous. By refactoring the DashboardTable and VehicleForm components, we separated visual concerns from business logic.

Decoupling Strategy

We moved toward a cleaner implementation by isolating the data-fetching logic using Axios and ensuring the UI components strictly focus on rendering props. Here is a simplified version of the improved pattern:

<template>
  <div>
    <VehicleTable :items="vehicles" @edit="openForm" />
    <VehicleForm v-if="isFormOpen" :data="activeVehicle" @save="updateVehicle" />
  </div>
</template>

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

const vehicles = ref([]);
const isFormOpen = ref(false);

const fetchVehicles = async () => {
  const response = await axios.get('/api/vehicles');
  vehicles.value = response.data;
};

onMounted(fetchVehicles);
</script>

The refactored approach uses a parent-child relationship where state flows down and events propagate up. This ensures the table and form are reusable and do not rely on global state or side effects hidden within the component internals.

The Lesson

Component refactoring isn't just about cleaning up code; it's about reducing the cognitive load required to make changes. By separating data orchestration from display components, you make your UI more predictable and easier to debug.

Actionable Takeaway

Review your largest components. If they are handling both external API requests and complex UI rendering, split them. Move the data orchestration into a parent component or a separate composable, and leave the UI components to focus solely on user interaction.

Generated with Gitvlg.com