I have an app with a map on only one page, built with vue3-openlayers.
Unfortunately, the package is big and ruin the performance of my whole app in the other pages.
I would like to load that plugin only when i'm on the /map page. I've tried to load the plugin only on page:start hook, on the component, on the page but nothing works and I get plugin already loaded
when I return to the page.
Here is my simplified code where the plugin is loaded gloabally:
// vue3-openlayers.client
export default defineNuxtPlugin({
parallel: true,
async setup(nuxtApp) {
//let openLayersLoaded = false;
//nuxtApp.hook('page:start', () => {
//const route = useRoute()
//if (route.fullPath === '/map' && !openLayersLoaded) {
nuxtApp.vueApp.use(OpenLayers);
//}
//})
}
})
.
// map.vue
<template>
<MyMap />
</template
.
// myMap.vue
// ...
<ol-map
:loadTilesWhileAnimating="true"
:loadTilesWhileInteracting="true"
>
<ol-view
ref="view"
:center="center"
:rotation="rotation"
:zoom="zoom"
/>
//...
</ol-map>