Embed Aurelia in Vue


is it possible to embed Aurelia in Vue. What I would like to do is to take Aurelia app, or even better Aurelia module, and then bootstrap it inside a Vue component to mount it on the component’s HTML element.

How can I make it happen? We have some legacy code in Aurelia, that we would like to embed inside Vue. I have tried couple of approaches with webpack build, but none of them worked. I was able to setup an Aurelia app and Vue app in single-spa framework, but I would like to avoid setting up different servers for different apps. I would rather somehow import Aurelia module into Vue.

Please help :slight_smile:

Or maybe it is possible to create an Aurelia library from applicationa and import it in Vue and use Aurelia modules from it?

All Aurelia needs is an application host. So in your Vue component, just need to get a reference to a real element where you want to host the Aurelia application, and start the app on that one. Have you tried it?

Hi, yes I did.
I spent a lot of time trying to make webpack compile Vue and Aurelia code together, but it seems to work now. Currently, my Vue component looks like this (single spa inspired):

async created() {
    const aurelia = Container.instance.get(Aurelia)
    await aurelia.start();
    await aurelia.setRoot(PLATFORM.moduleName('some module'), this.$el);
  unmounted() {
    const aurelia: AureliaInstance = Container.instance.get(Aurelia) as AureliaInstance;
    aurelia.host = null;
    aurelia.hostConfigured = false;

And then I configure Aurelia in main.ts:

bootstrap(async (aurelia: Aurelia) => {
        .plugin(PLATFORM.moduleName('some module'))

But what I am acutally trying to do, is to have a Vue component, that will display one module, and then another Vue component taht will display another module. Should I somehow requse Aurelia instances there?

OK, I have decided to go with single-spa approach. Thank you.