Merge pull request #474 from rockleona/fix/leaflet-ssr-window-not-def…

…ined fix: leafleat module import error in ssr mode
pycontw · Feb 9, 2024 · bc9e170 · bc9e170
2 parents 71ac55b + b93c2c3
commit bc9e170
Show file tree

Hide file tree

Showing 6 changed files with 29,326 additions and 87 deletions.
diff --git a/components/venue/VenueMap.vue b/components/venue/VenueMap.vue
@@ -15,7 +15,6 @@
             :attribution="tileProvider.attribution"
             layer-type="base"
         />
-
         <l-control-layers position="bottomright"></l-control-layers>
         <l-control-zoom position="topright"></l-control-zoom>
         <l-control
@@ -46,27 +45,8 @@
 </template>
 
 <script>
-import {
-    LMap,
-    LControl,
-    LTileLayer,
-    LMarker,
-    LControlZoom,
-    LControlLayers,
-    LTooltip,
-} from 'vue2-leaflet'
-import { icon } from 'leaflet'
 export default {
     name: 'VenueMap',
-    components: {
-        LMap,
-        LTileLayer,
-        LMarker,
-        LControlZoom,
-        LControlLayers,
-        LTooltip,
-        LControl,
-    },
     data() {
         return {
             venueButtonUrl: require('@/static/venue-button.png'),
@@ -97,24 +77,31 @@ export default {
             attribution:
                 '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
             zoom: 16,
-            icon: icon({
-                iconUrl: '/2023/snake.png',
-                shadowUrl: '/2023/snake-bg.png',
-                iconSize: [42, 42],
-                iconAnchor: [21, 21],
-                shadowSize: [45, 55],
-                shadowAnchor: [25, 30],
-            }),
+            icon: null,
             center: [25.040997, 121.611417],
             markerLatLng: [25.040997, 121.611417],
         }
     },
+    mounted() {
+        this.getLeaflet()
+    },
     methods: {
         centerMap() {
             this.$nextTick(() => {
                 this.$refs.leafletMap.mapObject.panTo([25.040997, 121.611417])
             })
         },
+        async getLeaflet() {
+            this.L = await import('leaflet')
+            this.icon = this.L.icon({
+                iconUrl: '/snake.png',
+                shadowUrl: '/snake-bg.png',
+                iconSize: [42, 42],
+                iconAnchor: [21, 21],
+                shadowSize: [45, 55],
+                shadowAnchor: [25, 30],
+            })
+        },
     },
 }
 </script>

diff --git a/nuxt.config.js b/nuxt.config.js
@@ -125,7 +125,6 @@ export default {
         { src: '~/plugins/strings.js' },
         { src: '~/plugins/vue-dompurify.js' },
         { src: '~/plugins/vue-awesome-swiper.js' },
-        { src: '~/plugins/leaflet.js', mode: 'client' },
     ],
 
     // Auto import components (https://go.nuxtjs.dev/config-components)
@@ -183,6 +182,8 @@ export default {
         // https://sitemap.nuxtjs.org/
         // This module must be at the end of the modules array
         '@nuxtjs/sitemap',
+        // https://github.com/schlunsen/nuxt-leaflet
+        'nuxt-leaflet',
     ],
     i18n: {
         strategy: 'prefix',