How i can use custom props data in Vue application Component
pravinshinde opened this issue · comments
@joeldenning,
"single-spa": "^5.5.3",
"single-spa-vue": "^1.8.2",
I have shared common **service instance** created with the help of '**rxjs**' to achieve ** inter app communication** between two application as:
singleSpa.registerApplication({
name: 'app1',
app: () => window.System.import('app1'),
activeWhen: location => location.pathname.startsWith('/app1'),
customProps: (name, location) => {
return { messageService: messageService };
}
});
I'm retrieving those **custom props** in child app **app1** as:
export const mount = props => vueLifecycles.mount(props).then(instance => {
// do what you want with the Vue instance
console.log('Data', props)
console.log('Vue instance', instance)
});
Here, I'm able to get props data & vue instance with props data as :
I have created vue instance like:
const vueLifecycles = singleSpaVue({
Vue,
appOptions: {
render: (h) => h(App),
router,
store,
},
});
How should i get that message-service instance in my component from Vue instance? So that i can use that & implement Inter App communication.
Good question - I just pushed some commits to the vue-microfrontends example that shows how.
I also plan on updating vue-cli-plugin-single-spa to document this in the main.js file. Also I plan on pull requesting the single-spa docs with this information.
I added documentation for this in single-spa/single-spa.js.org#301
I've updated vue-cli-plugin-single-spa to make this more obvious in single-spa/vue-cli-plugin-single-spa#11