I'm using NuxtJS and I use the library but the map doesn't show up properly. Here's my code, and a screen of the result :

map.vue :

<template>
  <div id="map-wrap" style="height: 100vh">
    <no-ssr>
      <l-map :zoom="13" :center="[55.9464418, 8.1277591]">
        <l-tile-layer
          url="http://{s}.tile.osm/{z}/{x}/{y}.png"
        ></l-tile-layer>
        <l-marker :lat-lng="[55.9464418, 8.1277591]"></l-marker>
      </l-map>
    </no-ssr>
  </div>
</template>

nuxt-leaflet.js :

import Vue from 'vue';
import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';

Vueponent('l-map', LMap);
Vueponent('l-tile-layer', LTileLayer);
Vueponent('l-marker', LMarker);

nuxt.config.js :

  plugins: [
    {
      src: '~/plugins/nuxt-leaflet',
      mode: 'client',
    },

    {
      src: '~/plugins/vue-my-photos',
      mode: 'client',
    },
  ],

Here's a screen of the result :

I'm using NuxtJS and I use the library https://vue2-leafletlify.app but the map doesn't show up properly. Here's my code, and a screen of the result :

map.vue :

<template>
  <div id="map-wrap" style="height: 100vh">
    <no-ssr>
      <l-map :zoom="13" :center="[55.9464418, 8.1277591]">
        <l-tile-layer
          url="http://{s}.tile.osm/{z}/{x}/{y}.png"
        ></l-tile-layer>
        <l-marker :lat-lng="[55.9464418, 8.1277591]"></l-marker>
      </l-map>
    </no-ssr>
  </div>
</template>

nuxt-leaflet.js :

import Vue from 'vue';
import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';

Vue.ponent('l-map', LMap);
Vue.ponent('l-tile-layer', LTileLayer);
Vue.ponent('l-marker', LMarker);

nuxt.config.js :

  plugins: [
    {
      src: '~/plugins/nuxt-leaflet',
      mode: 'client',
    },

    {
      src: '~/plugins/vue-my-photos',
      mode: 'client',
    },
  ],

Here's a screen of the result :

• javascript
• vue.js
• leaflet
• vue2leaflet

4 Answers 4

Finally, I've found out that I had to include the css from leaflet :

  head() {
    return {
      link: [
        {
          rel: 'stylesheet',
          href: 'https://unpkg./[email protected]/dist/leaflet.css',
        },
      ],
    }
  },

I am also using Vue Leaflet and it is working perfectly. Try changing the center props from array to object.

<l-map :zoom="13" :center="{
        lat: -7.280976,
        lng: 112.796844,
      }">

full code

    <div style="height: 350px; width: 100%">
      <client-only>
        <l-map
          ref="myMap"
          :zoom="zoom"
          :center="center"
          @update:center="centerUpdated"
          @click="handleClick"
        >
          <l-marker :lat-lng="regionCenter">
            <l-popup>Lokasi outlet</l-popup>
          </l-marker>
          <l-polyline
            :lat-lngs="polyline.latlngs"
            :color="polyline.color"
          ></l-polyline>
          <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
        </l-map>
      </client-only>
    </div>

data () {
  return {
      url: 'http://{s}.tile.osm/{z}/{x}/{y}.png',
      attribution:
        '© <a href="http://osm/copyright">OpenStreetMap</a> contributors',
      zoom: 15,
      center: {
        lat: -7.280976,
        lng: 112.796844,
      },
      bounds: null,
      regionCenter: [-7.280976, 112.794944],
      address: {
        long: '',
        display: '',
      },
      polyline: {
        color: 'red',
        latlngs: [],
      },

  }
}

in the Nuxt.js project sometimes your CSS doesn't load entirely and the Leaflet map cannot set width and height for that, it is better to hide the map, and when CSS and DOM load entirely then show the map.

<div v-if="map">
    <client-only>
      <l-map :zoom="13" :center="[selectedAddress.lat, selectedAddress.lng]">
        <l-tile-layer url="http://{s}.tile.osm/{z}/{x}/{y}.png" />
      </l-map>
    </client-only>
</div>

data

data () {
  return {
    map: false
  }
}

mounted

mounted () {
  this.$nextTick(() => {
    setTimeout(() => {
      this.map = true
    }, 200)
  });
},

add leaflet css in nuxt.config.js as global css:

css: ['leaflet/dist/leaflet.css'],