How to load `nuxt-leaflet` locally?

[d4rkr3pt0r]

By adding 'nuxt-leaflet', in nuxt.config.js, it is loading on all pages. But I need to import leaflet on ONE page only to reduce load size. How Can I do this?

[d4rkr3pt0r]

Here is the solution:

let LMap, LTileLayer, LMarker, LPopup, LIcon;
if (process.client) {
    require("leaflet");
    ({
        LMap,
        LTileLayer,
        LMarker,
        LPopup,
        LIcon
    } = require("vue2-leaflet/dist/vue2-leaflet.min"));
}
import 'leaflet/dist/leaflet.css'
export default {
    components: {
        LMap, LTileLayer, LMarker, LPopup, LIcon
    },
    // The rest of the code

[ayalon]

Thanks! Had the same issue and save 421kb in the vendor bundle thanks to this solution.

[Tobeyforce]

Here is the solution:

let LMap, LTileLayer, LMarker, LPopup, LIcon;
if (process.client) {
  require("leaflet");
  ({
      LMap,
      LTileLayer,
      LMarker,
      LPopup,
      LIcon
  } = require("vue2-leaflet/dist/vue2-leaflet.min"));
}
import 'leaflet/dist/leaflet.css'
export default {
  components: {
      LMap, LTileLayer, LMarker, LPopup, LIcon
  },
  // The rest of the code

I got everything to work, awesome! Just one more thing. My console is throwing this error: http://localhost:3000/_nuxt/node_modules/leaflet/dist/images/marker-shadow.png 404 (Not Found) It also can't find the marker-icon.png either in prod it seems. I don't understand why, I don't use these, I got my own custom icons..

Any chance this is fixable?

My code:

let LMap, LTileLayer, LMarker, LPopup, LIcon, LControlAttribution, LControlZoom
if (process.client) {
  require("leaflet");
  ({
    LMap,
    LTileLayer,
    LMarker,
    LPopup,
    LIcon,
    LControlAttribution,
    LControlZoom

  } = require("vue2-leaflet/dist/vue2-leaflet.min"));
}
import "leaflet/dist/leaflet.css";
export default {
    components: {
    "l-map": LMap,
    "l-tile-layer": LTileLayer,
    "l-marker": LMarker,
    "l-popup": LPopup,
    "l-icon": LIcon,
    "l-control-attribution": LControlAttribution,
    "l-control-zoom": LControlZoom
  },
....
  methods: {
    setIconStyles() {

      this.icon = this.$L.icon({
        shadowUrl: "/icon_shadow_7.png",
        iconUrl: "/housemarkerblue1.png",
        shadowAnchor: [10, 45],
        iconAnchor: [16, 37],
        popupAnchor: [-5, -35],
        // iconUrl: "/marker_black_2.png",
        iconSize: [23, 33],
        // staticAnchor: [30,30],
      });

    },
  },
....

Edit: It seems like vue2-leaflet-markercluster.js is causing the problem.. any ideas?

[luchito93]

you can do something like

/**
 * Use leaflet open maps
 */
let LMap, LMarker, LTileLayer
if (process.client) {
  require('leaflet')
  ;({
    LMap,
    LMarker,
    LTileLayer
  } = require('vue2-leaflet/dist/vue2-leaflet.min'))

  // fix error icon - webpack leaflet
  let { Icon } = require('leaflet')
  delete Icon.Default.prototype._getIconUrl
  Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png')
  })
}
import 'leaflet/dist/leaflet.css'
export default { // the rest of you code

taked from here https://vue2-leaflet.netlify.app/quickstart/#nuxt

[SoftCreatR]

What works for me is:

  delete L.Icon.Default.prototype._getIconUrl
  L.Icon.Default.mergeOptions({
    shadowUrl: ''
  })