Vue devtools not showing the micro-frontend components inside <RouterView>

[arielvol]

We started using Single-Spa in my company and since then the vue devtools is not working correctly.
All I see is the with a "functional" word near it but I can't get to the component inside it.

I tried to check the vue demo site you have:
https://coexisting-vue-microfrontends.surge.sh/app2

And even there, if you go to the Vue devtools you see the same things:

Is there a way to solve this and see the actual components for the micro-frontends that are loaded ?

[MilanKovacic]

Please try this newer example and see if the issue still occurs: https://github.com/vue-microfrontends.
I guess it probably has something to do with dynamic loading.

[arielvol]

Looks like it still happens. Even If I try to refresh the "apps" in the vue devtools I still don't see the actual componenets in each "app".

Did it work for you ? is there any way to get around this issue ? even if it's only for "development" mode

[MilanKovacic]

I have not used Vue (dev tools) with single-spa. Can you please post a screenshot of what you see when running the newer example?

[arielvol]

This is what I See:

I can't get into the components in the .

Not being able to use the vue devtools is a major issue I would think , so it is surprising that no one has opened an issue on this until now :-)

[MilanKovacic]

That is the picture from the old example (which doesn't utilize best practices). Please try https://github.com/vue-microfrontends, and try to run it locally, and then post the screenshot.
We will definitely look into the issue if it persists.

[arielvol]

Hi, I see the same thing:

Seems that Vue devtools don't know how to deal with the single-spa in-browser import and doens't know how to parse the components.
Am I wrong ?

[arielvol]

@MilanKovacic any thoughts ?

[MilanKovacic]

Currently, I do not have time to work on this issue, but I can give pointers.
The example projects is outdated. It uses old version of vue, single-spa, single-spa-vue, etc.
Try to create a simple repository containing a root config and a single microfrontend — using the latest versions, and reproduce the issue there.
Also, try to create a regular vue application and delay the router setup in some way to see what happens.
Check how devtools behave in a regular vue application when using a router.

[MilanKovacic]

@arielvol Did you manage to fix the issue?

[arielvol]

@MilanKovacic unfortunately... no. The devtools just doesn't work for us.

[arielvol]

@MilanKovacic are u aware of a fix or something new about this issue ?