Senior LevelVue JS
How do you integrate Vue 3 micro-frontends into an enterprise architecture using Vite Module Federation?
❓ Interview Prompt: Explain micro-frontend architecture in Vue 3, Vite Module Federation, exposing Remote components, and sharing runtime singletons.
Enterprise micro-frontend architectures allow independent teams to build and deploy separate Vue 3 applications that assemble dynamically at runtime in a Host container.
Vite Module Federation:
1
Remote Application: Configures '@originjs/vite-plugin-federation' to expose components ('exposes: { "./Header": "./src/Header.vue" }').
2
Host Application: Consumes remote components dynamically ('defineAsyncComponent(() => import("remote_app/Header"))').
3
Shared Singletons: Shares a single runtime instance of 'vue' and 'pinia' across micro-frontends to prevent duplicate framework downloads!
Code Implementation Example
typescript
// vite.config.ts (Remote App)
import federation from '@originjs/vite-plugin-federation';
export default {
plugins: [
federation({
name: 'remote_app',
filename: 'remoteEntry.js',
exposes: { './Widget': './src/components/Widget.vue' },
shared: ['vue', 'pinia'] // Shared singletons!
})
]
};💡Configuring Vite Module Federation for Vue 3 micro-frontends.
🎯 Interview Key Takeaway
Use Vite Module Federation to assemble independent Vue 3 micro-frontends dynamically while sharing singletons.
#Micro-Frontends#Module Federation#Vite#Senior
Back to all Vue JS Questions→