Microfrontends with Vue, React and .NET
Microfrontend-Plattform
Large web applications should be buildable like many small ones. Teams ship their parts independently, and to users the whole still feels like one application. The platform shows how to do that cleanly with Vue, React and .NET.
Features
Host with its own BFF
A frame in which all parts become one application.
- Serves the shell and handles sign-in via OpenID Connect (code + PKCE), navigation, error pages and a debug page.
- The session lives in a cookie; the browser never sees tokens.
Remotes with their own BFF
Every team builds and runs its part itself.
- A remote brings its interface and API and registers with the host by API key and heartbeat.
- The host then forwards through YARP and shows its pages.
Component library
All parts look alike and speak the same language.
- A remote of its own that others include through Module Federation.
- With a shared vocabulary for translations.
Bilingual, with roles
Ready for real users.
- Everything in German and English.
- Roles come from a dedicated identity server (OpenIddict).
Locally against a test stage
A team develops its part without starting the whole platform.
- A remote can be developed locally against a test stage.
Roadmap
What comes next. A plan, not a promise.
Next
- Localisation: more languages besides German and English
Technology
BFFs in ASP.NET Core (.NET 10) with YARP, OpenID Connect and JWT Bearer. The Vue variant uses Vue 3, Pinia, PrimeVue and
vue-i18n, the React variant React 19, shadcn/ui and react-i18next, both Vite with @module-federation/vite and Tailwind
CSS 4. End-to-end tests with Playwright.
Fact sheet
- Technology
- ASP.NET Core, YARP, Vue 3, React, Module Federation
- Kind
- Reference architecture, learning and demo project