Vue3 micro-frontend solution

Vue3 micro-frontend architecture provides a modular development solution for large-scale frontend applications, enabling the combination of multiple independent applications into a complete system. This architectural pattern is particularly suitable for team collaboration and project iteration, as each sub-application can be developed, deployed, and run independently.

Core Concepts of Micro-Frontends

Micro-frontends is an architectural style that decomposes frontend applications into multiple independent modules. Implementing micro-frontends in Vue3 requires consideration of several key factors:

1. Application Isolation: Ensure styles and states between sub-applications do not interfere with each other
2. Communication Mechanism: Establish data transfer channels between parent and child applications
3. Routing Coordination: Handle routing navigation between the main application and sub-applications
4. Resource Loading: Load sub-application resources on demand

Implementation Based on Module Federation

Webpack5's Module Federation feature is an effective solution for implementing Vue3 micro-frontends. Below is a basic configuration example:

// Main application webpack configuration
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        app1: 'app1@http://localhost:3001/remoteEntry.js',
        app2: 'app2@http://localhost:3002/remoteEntry.js'
      },
      shared: {
        vue: { singleton: true, eager: true },
        'vue-router': { singleton: true, eager: true }
      }
    })
  ]
}

// Sub-application webpack configuration
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './App': './src/App.vue'
      },
      shared: {
        vue: { singleton: true, eager: true },
        'vue-router': { singleton: true, eager: true }
      }
    })
  ]
}

Integration Based on Qiankun Framework

Qiankun is an open-source micro-frontend framework by Alibaba, which integrates seamlessly with Vue3:

// Main application entry file
import { registerMicroApps, start } from 'qiankun'

registerMicroApps([
  {
    name: 'vue3-app',
    entry: '//localhost:7100',
    container: '#subapp-container',
    activeRule: '/vue3'
  }
])

start()

// Sub-application configuration
let instance = null

function render(props = {}) {
  const { container } = props
  instance = createApp(App)
  instance.mount(container ? container.querySelector('#app') : '#app')
}

export async function bootstrap() {
  console.log('vue3 app bootstraped')
}

export async function mount(props) {
  render(props)
}

export async function unmount() {
  instance.unmount()
  instance = null
}

Style Isolation Solutions

Style isolation is crucial in micro-frontends. Here are several implementation approaches:

1. Shadow DOM Solution:

// When creating the sub-application container
const container = document.getElementById('subapp-container')
const shadowRoot = container.attachShadow({ mode: 'open' })
const appContainer = document.createElement('div')
shadowRoot.appendChild(appContainer)

2. CSS Namespace Solution:

<style scoped>
/* Sub-application component styles */
.container {
  /* Style rules */
}
</style>

3. Dynamic Stylesheet Loading/Unloading:

// When loading the sub-application
function loadStyles(url) {
  const link = document.createElement('link')
  link.rel = 'stylesheet'
  link.href = url
  document.head.appendChild(link)
  return () => document.head.removeChild(link)
}

State Management and Communication

Communication between parent and child applications can be achieved through various methods:

1. Custom Events:

// Parent application dispatches an event
window.dispatchEvent(new CustomEvent('main-event', { detail: data }))

// Child application listens
window.addEventListener('main-event', (event) => {
  console.log(event.detail)
})

2. Shared State Store:

// Create a shared store
const sharedStore = reactive({
  state: {},
  setState(newState) {
    this.state = { ...this.state, ...newState }
  }
})

// Main application exports
window.sharedStore = sharedStore

// Child application uses
const store = window.sharedStore
store.setState({ user: { name: 'John' } })

3. Props Passing:

// When the main application renders the sub-application
mountSubApp({
  container: '#app1',
  props: {
    onDataUpdate: (data) => {
      // Handle sub-application data
    }
  }
})

Routing Handling Strategies

Routing in micro-frontends requires special attention:

1. Main Application Routing Configuration:

const routes = [
  {
    path: '/app1/*',
    component: () => import('./views/App1Container.vue')
  },
  {
    path: '/app2/*',
    component: () => import('./views/App2Container.vue')
  }
]

2. Sub-Application Routing Adaptation:

// Sub-application routing configuration
const router = createRouter({
  history: createWebHistory(
    window.__POWERED_BY_QIANKUN__ ? '/app1' : '/'
  ),
  routes
})

3. Routing Event Synchronization:

// Listen for routing changes
window.addEventListener('qiankun:routeChange', (event) => {
  router.push(event.detail.path)
})

Performance Optimization Techniques

Performance optimization is particularly important in micro-frontend architectures:

1. Preloading Sub-Application Resources:

// Main application configuration
start({
  prefetch: true,
  prefetchThreshold: 5
})

2. On-Demand Loading of Sub-Applications:

// Dynamically load sub-applications
function loadApp(name) {
  return import(`./apps/${name}/index.js`)
}

3. Sharing Common Dependencies:

// Webpack configuration
shared: {
  vue: { singleton: true },
  'vue-router': { singleton: true },
  'element-plus': { singleton: true }
}

Deployment and CI/CD Integration

Deployment strategies for micro-frontend projects:

1. Independent Deployment of Sub-Applications:

# CI configuration example
steps:
  - name: Build and Deploy App1
    run: |
      cd app1
      npm run build
      aws s3 sync dist s3://app1-bucket

2. Main Application Configuration for Sub-Application Entry:

// Dynamically configure sub-application entries
const subApps = {
  app1: process.env.APP1_URL || 'http://localhost:3001',
  app2: process.env.APP2_URL || 'http://localhost:3002'
}

3. Version Compatibility Checks:

// Main application checks sub-application versions
async function checkVersion(appName) {
  const manifest = await fetch(`${subApps[appName]}/asset-manifest.json`)
  const { version } = await manifest.json()
  return compareVersions(version, MIN_VERSIONS[appName])
}

Error Handling and Monitoring

Comprehensive error handling mechanisms:

1. Global Error Capture:

// Main application error handling
window.addEventListener('error', (event) => {
  trackError(event.error)
})

// Sub-application error boundary
<ErrorBoundary>
  <MicroApp />
</ErrorBoundary>

2. Sub-Application Health Checks:

// Periodic checks for sub-application availability
setInterval(async () => {
  const status = await fetchSubAppHealth()
  if (!status.ok) {
    showFallbackUI()
  }
}, 30000)

3. Performance Monitoring Integration:

// Use Performance API for monitoring
const subAppPerfEntries = performance.getEntriesByType('resource')
  .filter(entry => entry.name.includes('subapp'))

Testing Strategies

Testing approaches in micro-frontend architectures:

1. Independent Testing of Sub-Applications:

// Sub-application unit testing
describe('App1 Component', () => {
  it('should render correctly', () => {
    const wrapper = mount(App1Component)
    expect(wrapper.text()).toContain('App1')
  })
})

2. Integration Testing Solutions:

// Main application integration testing
describe('MicroApp Integration', () => {
  beforeAll(() => {
    loadApp('app1')
  })
  
  it('should communicate with host', () => {
    // Test communication logic
  })
})

3. E2E Testing Configuration:

// Cypress test example
describe('Micro Frontend', () => {
  it('should load app1 successfully', () => {
    cy.visit('/app1')
    cy.contains('App1 Content').should('be.visible')
  })
})

Practical Case Analysis

E-commerce platform micro-frontend implementation:

// Product list sub-application
const ProductApp = {
  setup() {
    const products = ref([])
    
    onMounted(async () => {
      products.value = await fetchProducts()
    })
    
    return { products }
  },
  template: `
    <div class="product-list">
      <ProductCard 
        v-for="product in products"
        :key="product.id"
        :product="product"
        @add-to-cart="handleAddToCart"
      />
    </div>
  `
}

// Shopping cart sub-application
const CartApp = {
  setup() {
    const cartItems = ref([])
    
    const handleAddItem = (product) => {
      cartItems.value.push(product)
    }
    
    return { cartItems, handleAddItem }
  }
}

// Main application integration
const App = {
  components: { ProductApp, CartApp },
  template: `
    <div class="main-app">
      <header>E-commerce Platform</header>
      <div class="content">
        <ProductApp @add-to-cart="cartApp.handleAddItem" />
        <CartApp ref="cartApp" />
      </div>
    </div>
  `
}