How to load a plugin on a specific page in nuxt 3

115 views Asked by At

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>
0

There are 0 answers