Importing a component from one application into another application

[veeral-patel]

First of all, thank you for this great framework!

So say I have two Vue.js applications, A and B, that I'm combining using single-spa. Application A has a toast component that I'd like to use in application B.

This page indicates two things I can do:

1. Import/export components
2. Use single-spa parcels

I would prefer to import/export components over using parcels -- would something like this work?

Application A

spa/src/A/components/MyToast.vue

class MyToast extends Vue {
...
}

export default MyToast;

Application B

spa/src/B/components/FancyButton.vue

import MyToast from 'spa/src/A/components/MyToast'

class FancyButton extends Vue {
// use MyToast component here
}

Do you see any issues with doing something like this? Thanks again for your help!

[frehner]

That's exactly correct.

If you are using the recommended setup then it will all happen at run-time in the browser and you can deploy AppA and AppB independently.

If not, then you're probably in a position where they have to be bundled into the same package, so it may not get you much in the end.

👍

[joeldenning]

Also, see related single-spa/single-spa-vue#14 which will make using parcels in Vue a lot easier. If you'd be interested in collaborating on that, I'd be happy to show you were we could get started on it.

[veeral-patel]

Thank you @frehner @joeldenning! I haven't tried out either method yet, but I'll do that and raise another issue if I have any problems.