VueJS router project

[egoisticum]

Hello guys,

first of all have to say that single-spa seems gr8 work for me and my team needs.

However, we play a lot with VueJS and want to combine it with single-spa so we can make our project attractive for more other javascript developers such as Angular, React, etc...

The thing is, we already have monolith application written in VueJS which behave very nice but we are not experts enough to port it into single-spa. Our issue is as title says use of VueJS router.

Let's be honest and confess that application is pretty useless if we can't use router there.

Since we struggle about this few days we pushed project on this repository https://github.com/egoisticum/single-spa-vue-router so somebody can help us.

What we did is basic:

1. Forked single-spa-portal-example repo
2. Removed all other applications except Vue one
3. Put some dummy content and routes into Vue project

We tried to make any VueRouter configuration possibility and tested it but without success.

Also, followed the instructions from this discussion single-spa/single-spa#228 but nothing made it work for our project.

Can't wait to see community suggestions or some commits on our repository.

BTW I mentioned you guys doesn't have to much Vue lowers in your team and that you seek for it. So, maybe this project can be cool playground for all VueJS folks which are interested in single-spa and we as a team are eager to make much more examples Vue based just after we make vue router works.

Thanks in advance.

[hari-h]

Following - Stuck in a similar situation while working with VueRouter. Would appreciate any suggestions on this.

[malanoga]

same problem here.

[tariktuzlakovic]

Exactly the same issue happened to me. Nevertheless, when I load the app by itself (standalone run and build) it works just fine. But still stuck on the global run of the app.
Hope someone can help with this, it's been few days since I'm stuck on this...

[kresic-ivan-nsoft]

Any fixes for this?

[edinlonic]

Encountered the same issue..

[unm4sk1g]

This is a blocker for us as well, router is a key part for us, would appreciate a fix here.

[egoisticum]

Made it work on very primitve way by simply importing other components egoisticum/single-spa-vue-router@d24f184

However, please don't just close this issue until we find out better approach.
Also, contributors of single-spa can approach here with some ideas and vision how we gonna make this example application much more useful for community.

[fergardi]

I'm interested in this subject as well. Any progresses so far?

[egoisticum]

@fergardi here you go https://github.com/egoisticum/single-spa-portal-example-vue-example I forked single-spa-portal-example and did some vue magic such as router handling and redux state implementation. Feel free to join to expand this example even more. ;)

[fergardi]

Thanks @egoisticum for the fork. I'm gonna try it right away!

However, I'm still in doubt of how this will work in production. Let's say you compile a production build of a Vue app, as well as the Single SPA Portal app. Then how do you link the compiled Vue app into the Portal? I mean, in the singleSpaEntry.js there are references to the ./App.vue file, but not at all to the compiled dist folder. Does this means that this solution only works with non compiled, in development projects?

What I am trying to achieve here is this scenario:

• Compiled Portal in production mode (either made with VueJS, Angular, React, whatever framework I choose)
• Compiled VueJS App1 as a standalone application, mounted in real-time by the Portal, accesible by a defined route.
• Compiled Angular App2 as a standalone application, mounted in real-time by the Portal, accesible by a defined route.

This way, our App1 team can work in their own repository, republish the app to a pre-stablished production folder, and the Portal will still be able to found it and mount it in real-time. The Portal team and the App2 team will not be interrupted by this release, and for the end user it will be transparent as well.

Thanks in advance.

[fergardi]

Nevermind, I now understand the procedure completely. Thank you all. However, @egoisticum, I could not make the vue app work in watch:standalone mode with the router working. It gaves me this error:

Thank you.

[egoisticum]

This is great because you understand it. My team situation is that we have only VueJS developers one portal app which is also Vue solution and 3 child again VueJS applications. It's great because we can use our lovely framework but still can be opened for new developers who will come with our startup business success. So, if you're or some of your team members are eager to contribute feel free to approach to see if we can organise some virtual open-source team who can help to community but ourselves as well with knowledge sharing about this pretty not well documented project.

[fergardi]

@egoisticum can you build the Portal app using some framework like VueJS as well as the micro apps? How can you do that? Can you show me an example of the Portal being a VueJS app?

Thank you in advance.

[egoisticum]

The philosophy is very simple:

1. Leave whole portal code as it is.
2. Add VueJS into portal project
3. Do VueJS instantiation after portal stuff finish.

Just spend on this one couple of hours if not make some success I'll update my single-spa-portal-example fork during the weekend days.

[fergardi]

@egoisticum thanks for your help. Unfortunately, I have not been able to make it work.

[amit131]

Hi egoisticum,

Sorry not sure if I could really understand the issue! I just ran single-spa-portal having portal and vue app after changing the routes as of yours from single-spa-vue-router and it worked fine. I even added one more route and it also ran fine. Could you please clarify what issue you have here?

Updates: I tried to run standalone and it still worked fine there so probably I couldn't get what the issue is?

Updates: I also tried https://github.com/egoisticum/single-spa-portal-example-vue-example and all went well

[resourceF]

The philosophy is very simple:

1. Leave whole portal code as it is.
2. Add VueJS into portal project
3. Do VueJS instantiation after portal stuff finish.

Just spend on this one couple of hours if not make some success I'll update my single-spa-portal-example fork during the weekend days.

Have you solved this problem?
and, Is your error message this? @egoisticum

thanks