Map disappeared when navigating to different layout and back again

[zhaoweizhong]

This is an update of #100

The issue I located is that when using multiple Nuxt layouts and navigating from a page that contains a Map to another page with a different layout, then navigating back again, the Map component will disappear.

Reproduction: https://stackblitz.com/edit/nuxt-starter-1nnuc9
You can click on the Map link, wait for the map to load and then click on the Home link, then click on the Map link to go back to the map page, and you'll see that the map component has disappeared.

I'm not sure if it is an issue with this module, or just my problem on implementation.

[AlexLavoie42]

I believe this is an upstream bug in Nuxt/Vue. vuejs/core#10098 nuxt/nuxt#13309

While I do not see the relevant error, downgrading the reproduction to Vue 3.4.8 the problem seems to go away. The issue seems very similar as well (breaking navigation when layouts change)

I have also been blocked in my own applications by this bug, to workaround just downgrade vue to 3.4.8 until the issue is resolved.

[AlexLavoie42]

Update:

With 3.4.20 vuejs/core#10098 has been been fixed. Unfortunately it does not appear to be the same root cause as this.

Upon further investigation, it seems like KeepAlive is not working properly when used with nuxt layouts. I will attempt to create an issue with a proper reproduction for this in Nuxt/Vue when I have time (if someone else wants do this it would be greatly appreciated!)

To workaround this I recommend disabling KeepAlive for the time being by setting the persistent option to false: https://alexlavoie42.github.io/Nuxt-Mapbox/configuration/mapbox-config#persistent-map-instances

[AlexLavoie42]

Appears this is now working as of Nuxt 3.15.2

See updated reproduction: https://stackblitz.com/edit/nuxt-starter-uef1xesb