¿Cómo estructurarías una aplicación Vue enterprise por dominios o features para que escale sin sobreingeniería?

Respuesta

• La estructura que mejor suele escalar en Vue es feature-first: cada dominio agrupa rutas, vistas, componentes, composables, stores y tests que cambian juntos.
• Deja shared solo para piezas realmente transversales y estables, como inputs base, utilidades puras o layout muy genérico.
• Añade reglas de import y lazy loading por área para que el crecimiento del proyecto no rompa límites ni bundle.

Puntos clave

• La decisión correcta en Vue casi siempre depende del alcance del problema: componente, subárbol, feature o aplicación completa.
• Una buena arquitectura deja dependencias visibles, reduce puntos de escritura y mantiene cerca del caso de uso lo que cambia junto.
• Si una solución necesita demasiadas capas para explicar algo pequeño, probablemente está modelando peor el problema, no mejor.

Errores comunes

• Crear una capa “shared” enorme donde cabe todo acaba destruyendo justo el aislamiento que se buscaba.
• Escoger mecanismo por moda en vez de por alcance suele dejar soluciones más difíciles de leer que de cambiar.

Ejemplo de código

export const billingRoutes = [
  {
    path: "/billing/invoices",
    component: () => import("./features/billing/InvoicesView.vue"),
  },
  {
    path: "/billing/payments",
    component: () => import("./features/billing/PaymentsView.vue"),
  },
];

Ejemplo o caso real

Esto suele aparecer en features vivas del producto donde cada cambio pequeño empieza a tocar demasiados componentes, composables o stores.

Idea clave

La mejor arquitectura en Vue es la que reduce dependencias hoy y sigue siendo explicable mañana.