Trying to pass props to vue component with @module-federation/bridge-vue3@latest

[beatriz-cantilho]

Hi, guys!

I'm having some trouble to pass propreties to my component when I create it with the structure below:

Host/App.vue

Host App

<script> import { defineComponent, ref } from 'vue' import { loadRemote } from '@module-federation/enhanced/runtime' import * as bridge from '@module-federation/bridge-vue3' const RemoteComponent = bridge.createRemoteComponent({ loader: () => loadRemote('studygroups/exportApp'), }) export default defineComponent({ components: { RemoteComponent, }, setup() { const paramString = ref('Text from Host') const paramNumber = ref(123) return { paramString, paramNumber, } }, }) </script>

---

Remote export-app.js
import App from './App.vue'
import './main.scss'
import router from './router'
import { createBridgeComponent } from '@module-federation/bridge-vue3'

export default createBridgeComponent({
rootComponent: App,
appOptions: () => ({
router,
}),
})

Remote app.vue

someParam: {{ someParam }}

anotherParam: {{ anotherParam }}

Custom Attribute: {{ $attrs['custom-attr'] }}

All Attributes: {{ $attrs }}

<script> export default { inheritAttrs: false, props: { someParam: { type: String, default: '', }, anotherParam: { type: Number, default: 0, }, }, setup(props, { attrs }) { // attrs contains all attributes passed from the host console.log('Props:', props) console.log('Attrs:', attrs) return { attrs, // Expose attrs to the template if needed } }, } </script>

Any suggestion?