nuxt vue3 leaflet window is not defined

Question

I'm trying to migrate my existing SPA Vue app to NuxtJS framework to take benefits of SSR.

In my current app, I'm using the following directives to load my dependencies:

 <script>     
 import L from 'leaflet';
 import '@geoman-io/leaflet-geoman-free';
 import 'leaflet.markercluster';
 import { Tooltip, Carousel } from 'bootstrap'; 
 import 'leaflet-fullscreen';
 import 'leaflet-sidebar';
 import 'leaflet.vectorgrid';
 export default {
  name: 'carte',
  props: ['gps'],
  components: {
    GChart,
  },
  data() {
...
},
...
}
</script>

When loading the component, I get the "window is not defined" error from Nuxt.

Do you know how to get over this error? If possible, I don't want to load plugins globally because I need those modules only for that component.

Please note that I'm not using Nuxt-leaflet or Vue-leaflet as they do not work with Vue 3.

Thanks a lot!

Answer 1

Using the native leaflet library, I managed to get it work with the following code:

plugins/leaflet.client.ts

import L from 'leaflet'
import 'leaflet.markercluster';
import 'leaflet-fullscreen';
import 'leaflet-sidebar';
import 'leaflet.vectorgrid';
export default defineNuxtPlugin(nuxtApp => {
  return {
      provide: {
        L
      }
    }
})

and in my component using leaflet:

mounted () {
  // Patch for Vectorgrid with Leaflet >= 1.8
  L.DomEvent.fakeStop = function () {
    return true;
  }
  this.$nextTick(function () {
    this.initcarte();
  })
},

where initcarte() is:

const map = L.map("map")
map.setView([lat, lng], zoom)

and I had to change my app.vue to include a parameter in NuxtPage to force component reload on route change:

<NuxtPage :key="$route.fullPath" />

Probably not perfect, but it's working.