Heredas una base Vue con mezcla de Options API y Composition API: ¿cómo la modernizarías sin reescribir todo?

Respuesta

• Empieza por las zonas donde la mezcla actual ya frena cambios: componentes enormes, mixins opacos o watchers difíciles de seguir.
• Extrae primero composables y contratos de datos reutilizables; después migra la vista visible cuando la base ya esté más limpia.
• Define una norma para código nuevo y evita seguir mezclando estilos sin criterio mientras conviven Options API y Composition API.

Puntos clave

• La modernización útil reduce dolor operativo hoy y construye una senda de salida para el legacy; no vive de una promesa futura de reescritura total.
• Las capas puente sirven si tienen un alcance pequeño, una razón clara y una retirada prevista; si no, se convierten en la nueva deuda fija.
• Cuando mezclas viejo y nuevo, necesitas una regla explícita para el código entrante o el sistema seguirá creciendo en dos direcciones a la vez.

Errores comunes

• Cambiar sintaxis sin tocar acoplamientos, responsabilidades y contratos apenas mejora la mantenibilidad.
• Mantener indefinidamente dos caminos de estado o fetch porque “de momento funciona” congela la modernización.

Ejemplo de código

export function useSessionFacade() {
  const legacyStore = useLegacyVuexStore();
  const session = useSessionStore();

  return {
    user: computed(() => session.user ?? legacyStore.state.session.user),
    login: session.login,
  };
}

Ejemplo o caso real

Es habitual en repositorios con piezas antiguas todavía en uso, nuevas convenciones entrando poco a poco y presión real por seguir entregando funcionalidad.

Idea clave

Legacy se mejora por tramos útiles y con salida definida, no por una promesa eterna de reescritura.