Skip to content

fix(vue3-bridge): resolved remote component prop handling and root container attribute passing#3562

Merged
danpeen merged 6 commits intomodule-federation:mainfrom
Dell-it:main
Mar 4, 2025
Merged

fix(vue3-bridge): resolved remote component prop handling and root container attribute passing#3562
danpeen merged 6 commits intomodule-federation:mainfrom
Dell-it:main

Conversation

@Dell-it
Copy link
Copy Markdown
Contributor

@Dell-it Dell-it commented Mar 1, 2025

Description

Fixed several issues:

  1. Resolved inconsistencies in naming between name and moduleName to align with the type defined in packages/bridge/bridge-shared/src/type.ts. This also fixed an issue where name was being passed to the remote component, and if it was <router-view>, it caused rendering issues.

  2. Issue: When passing props from a Vue 3 host application to a Vue 3 remote application created with createRemoteComponent, the props were being applied as attributes on the root container instead of being passed to the remote component.
    Fix: Set inheritAttrs: false in remoteApp.tsx and explicitly pass all attributes to the remote component using useAttrs().

  3. Added a rootAttrs parameter to createRemoteComponent to allow passing attributes to the root container where the remote application is mounted. This enables setting classes, identifiers, and other attributes for the container element.

Related Issue

Following up on: #3462 (comment)

Types of changes

  • Docs change / refactoring / dependency upgrade
  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)

Checklist

  • I have added tests to cover my changes.
  • All new and existing tests passed.
  • I have updated the documentation.

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Mar 1, 2025

🦋 Changeset detected

Latest commit: ef8fec3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 29 packages
Name Type
@module-federation/bridge-vue3 Patch
@module-federation/runtime Patch
@module-federation/enhanced Patch
@module-federation/rspack Patch
@module-federation/webpack-bundler-runtime Patch
@module-federation/sdk Patch
@module-federation/runtime-tools Patch
@module-federation/managers Patch
@module-federation/manifest Patch
@module-federation/dts-plugin Patch
@module-federation/third-party-dts-extractor Patch
@module-federation/devtools Patch
@module-federation/bridge-react Patch
@module-federation/bridge-shared Patch
@module-federation/bridge-react-webpack-plugin Patch
@module-federation/modern-js Patch
@module-federation/retry-plugin Patch
@module-federation/data-prefetch Patch
@module-federation/rsbuild-plugin Patch
@module-federation/error-codes Patch
@module-federation/inject-external-runtime-core-plugin Patch
@module-federation/nextjs-mf Patch
@module-federation/node Patch
@module-federation/storybook-addon Patch
@module-federation/modernjsapp Patch
@module-federation/esbuild Patch
@module-federation/runtime-core Patch
@module-federation/utilities Patch
website-new Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@netlify
Copy link
Copy Markdown

netlify bot commented Mar 1, 2025

Deploy Preview for module-federation-docs ready!

Name Link
🔨 Latest commit ef8fec3
🔍 Latest deploy log https://app.netlify.com/sites/module-federation-docs/deploys/67c579340db6e40008d392c6
😎 Deploy Preview https://deploy-preview-3562--module-federation-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@Dell-it Dell-it reopened this Mar 1, 2025
@danpeen danpeen merged commit 6bc13cf into module-federation:main Mar 4, 2025
14 checks passed
@2heal1 2heal1 mentioned this pull request Mar 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants