Dynamic component doesn't unmounted when switching page

[RamaHerbin]

Hi there,

I noticed an unexpected behavior when adding the Nuxt Mapbox module. I'm building a dashboard with Gridstack. When navigating between different pages without nuxt-mapbox, everything works fine.

However as soon as I add the module to the nuxt.config, the Grid component I'm using within the differents page stops to unmount. This causes major bugs, making the layout disorganized and buggy.

Do you have any idea why the unMounted hook isn't called?

Here is an video

https://github.com/AlexLavoie42/Nuxt-Mapbox/assets/41597427/c7727a47-ed14-429d-af33-9c7dfea6bba3

And the demo with the issuue :

https://stackblitz.com/edit/nuxt-starter-agunls?file=components%2FGrid.vue,nuxt.config.ts

Nuxt ^3.11.2 nuxt-mapbox ^1.6.0

[AlexLavoie42]

This is caused by the module enabling KeepAlive by default, so map instances can persist on route changes.

https://alexlavoie42.github.io/Nuxt-Mapbox/configuration/mapbox-config#persistent-map-instances

When KeepAlive is used, onUnmounted is not called. You can either disable persistence or use onDeactivated

[RamaHerbin]

@AlexLavoie42 Understood! Thank for your work and your quick answer