Embed Aurelia in Vue

1

Hi,

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:

2

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

3

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?

4

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.root.view.removeNodes();
    aurelia.root.detached();
    aurelia.root.unbind();
    aurelia.host = null;
    aurelia.hostConfigured = false;
  }

And then I configure Aurelia in main.ts:

bootstrap(async (aurelia: Aurelia) => {
    aurelia.use
        .standardConfiguration()
        .plugin(PLATFORM.moduleName('aurelia-animator-css'))
        .plugin(PLATFORM.moduleName('some module'))
        .plugin(PLATFORM.moduleName('aurelia-dialog'));
});

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?

5

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