schlunsen / nuxt-leaflet Goto Github PK

View Code? Open in Web Editor NEW

201.0 8.0 29.0 5.1 MB

Nuxt module for leafletjs - https://schlunsen.github.io/nuxt-leaflet/

License: MIT License

JavaScript 31.40% Vue 67.77% Stylus 0.83%

nuxt leafletjs

nuxt-leaflet's Introduction

nuxt-leaflet

Nuxt module for leafletjs

📖 Release Notes

Features

Nuxt module for vue2-leaflet.

See vue2-leaflet for more details.

Setup

Add nuxt-leaflet dependency using yarn or npm to your project
Add nuxt-leaflet to modules section of nuxt.config.js

{
  modules: [
    // Simple usage
    'nuxt-leaflet',

    // With options
    ['nuxt-leaflet', { /* module options */ }],
 ]
}

Usage

Add the map to your page

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

The Leaflet 'L' object can be found on vue component: this.$L

Typescript

If you're using TypeScript, you'll need to add nuxt-leaflet in your compilerOptions of your tsconfig.json :

{
  "compilerOptions": {
    "types": [
      "@types/node",
      "@nuxt/vue-app",
      "nuxt-leaflet"
    ]
  }
}

You'll then be able to have autocompletion in Vue instances (this.$L).

List of currently implemented components

See components supported

Development

Clone this repository
Install dependencies using yarn install or npm install
Start development server using npm run dev

License

MIT License

nuxt-leaflet's People

Contributors

Stargazers

Watchers

nuxt-leaflet's Issues

Adding a map marker dynamically

In the example, the "l-marker" is given in the l-map, however, I'm having no luck creating a dynamic marker. I'd like to achieve the leaflet example of L.marker(['lat', 'lng']).addTo(map) but how do I access the rendered map?

Can we have an example please?

in the main page, there is an example for static map, using params for location.
can we get an example please, for dynamically creating a map? with center, zooming option, several markers.
If possible, please share some example of how to use that this.$L methods. How to connect them to a specific map (assuming more than one). Again, for example, please show a simple button on the page that takes you to another location. Thanks!

this.$L not available in composition API

As the title says, how can I get to the $L when using composition API?
I need to get my mouse position i.e. coords.

How to add googlemutant layer into it

nuxt-leaflet documentation

Your example at the documentation is this one.

<div id="map-wrap" style="height: 100%">
 <no-ssr>
   <l-map :zoom=13 :center="[47.413220, -1.219482]">
     <l-tilelayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tilelayer>
     <l-marker :lat-lng="[47.413220, -1.219482]"></l-marker>
   </l-map>
 </no-ssr>
</div>

Please make a correction to the documentation. The working one is this

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

Add custom vue leaflet component

Hi,
is it possible to add custom leaflet component or remove unnecessary components?
For example i want add https://github.com/jperelli/vue2-leaflet-markercluster
and not use some included in https://github.com/schlunsen/nuxt-leaflet/blob/master/lib/templates/plugin.js that i dont use. Or should i create my own plugin.
Thank you

Icons change?

Hi,
How should I change the icons to use mines instead of the ones coming from cdnjs?

I'm referring to this part:

delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.imagePath = ''
L.Icon.Default.mergeOptions({
  iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/images/marker-icon-2x.png',
  iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/images/marker-icon.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/images/marker-shadow.png'
})

Is there a way without having to Simply copy-paste this bit of code (and thus import all dependencies related) in my template?

Thanks!

Styles fail to load in combination with PurgeCSS

The stylesheet fails to inject on nuxt generate with target: static when used with TailwindCSS/PurgeCSS. A workaround is to load the stylesheet via unpkg:

nuxt.config.js

export default {
  link: [
    {
      rel: 'stylesheet',
      href: 'https://unpkg.com/leaflet/dist/leaflet.css'
    }
  ]
}

multipolygon

is it possible to use multipolygon ? how ?

Cant access map oject on mounted hook

      <no-ssr>
        <l-map :zoom="zoom"
               :center="center"
               ref="map">
          <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
          <!-- <l-marker :lat-lng="[47.413220, -1.219482]"></l-marker> -->
        </l-map>
      </no-ssr>

mounted() {
this.$nextTick(() => {
    this.map = this.$refs.map.mapObject // work as expected
  })
}

Rendering map is too slow

Hi, thanks for this module for leaflet.
I tried to loop all markers from some API using v-for but map rendered so slow specially when there's too many markers.

<l-marker
    v-for="c in cases"
    :icon="icon"
    :key="c.case_no"
    :lat-lng="[c.latitude,c.longitude]"
>

Axios.get(`https://some-api/cases`).then(
    response => {
      this.cases = response.data.filter(item => item.latitude != 'TBA')
      this.isLoading = false
    }
)

Maps in nuxts static mode break

Hi!
I've been banging my head against this the last few weeks. Maps work great in universal mode but when I run nuxt generate they fall apart - map tiles are spread out on the page instead of being in element, see the screenshot below.

The implementation worked before but broke in an update(?) and I haven't been able to pin down which package yet. I get the same result with google maps in Nuxt and leaflet and google maps in Gridsome so it seems to be a pretty general issue with maps and static.

Has anyone else run into this? Any ideas on how to debug?

Adding plugin to nuxt-leaflet

Hi,

how can I add a plugin to nuxt-leaflet?

Currently I would like to add a heatmap. I found a lot of plugins in the leaflet page. But I do not know how to add them.

I would like to try this one, but I don't know how to add this?
https://www.patrick-wied.at/static/heatmapjs/example-heatmap-leaflet.html

Removing attribution

Is there any way to remove the attribution to leaflet in the bottom right? Couldn't find any vue-related answers relating to it anywhere so figured I'd try here.
It seems like it's possible to add attributions using the attribute prop for l-tile-layer, however it looks to me like the attribution to leaflet belongs to the l-map component.. how would we change that with nuxt-leaflet?

I don't see map at all

I have installed npm package, added module to the nuxt config file and added map to my index.vue page but don't see a map at all. What is wrong?

Bump the version dependency of vue2-leaflet

Could you change the dependency version of vue2-leaflet to be the latest? Currently it is 2.6.0 - thanks

Vuetify v-navigation-drawer goes under the map

Hello everyone,
I'm new with NuxtJs and I try to use Nuxt-Leaflet with Vuetify.
I used the example of the masterbranch but I have a problem with the navigation drawer in Firefox as in Chrome:

1- the navigation drawer goes under the leaflet map when I click on it.

2- the navigation drawer goes on the v-app-bar even when I put the v-navigation-drawer clipped property on True.

Does anyone know how to fix it?
Thank you very much in advance,

Florent LUCAS

Still getting window is not defined

I added the latest nuxt-leaflet dependency (no other leaflet dependency), but I am still having troubles getting it to work...

Using nuxt 2.2.0.

I included the module 'nuxt-leaflet'. This is my component:

<template>
        <no-ssr>
            <l-map
                    id="map"
                    :zoom="zoom"
                    :min-zoom="3"
                    :center="center"
            >

            </l-map>
        </no-ssr>
 </template>

<script lang="ts">
    import Vue from 'vue';
    import {icon, latLng, marker} from 'leaflet';
    import {ExploreItemType} from '~/components/explore/ExploreItem';
    import PopupContent from '~/components/explore/PopupContent.vue';
    import {Component, Prop, Watch} from "nuxt-property-decorator";

    @Component({
        props: {
            exploreItems: Array
        }
    })
    export default class ExplorerMap extends Vue {

        url = 'https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoia2dydWVuZWJlcmciLCJhIjoiY2puajJ3c3dmMGV1YzNxbDdwZ3Y5MXc0bCJ9.kuHo67NUkzqya1NtSjTYtw';
        attribution = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
        zoom = 3;
        center = latLng(51.505, -0.09);
        drawCluster = true;

        @Prop()
        exploreItems;

        getGeoJson(exploreItem) {
            return {
                type: 'FeatureCollection',
                features: [
                    {
                        geometry: {
                            type: 'Point',
                            coordinates: [
                                exploreItem.location.geoPoint.longitude,
                                exploreItem.location.geoPoint.latitude,
                            ],
                        },
                        type: 'Feature',
                        properties: {
                            identifier: exploreItem.identifier,
                            popupContent: exploreItem.title,
                        },
                        id: 51,
                    }],
            };
        }

        onEachFeature(feature, layer) {
            const self = this;
            const PopupCont = Vue.extend(PopupContent);
            const popup = new PopupCont({
                propsData: {
                    type: feature.geometry.type,
                    text: feature.properties.popupContent
                }
            });
            layer.bindPopup(popup.$mount().$el);

            layer.on('click', (e) => {
                self.$emit('markerSelected', e.target.feature.properties.identifier);
            });
        }

        getGeoJsonOptions(exploreItem) {
            const self = this;
            return {
                pointToLayer(feature, latlng) {
                    return marker(latlng, {
                        icon: icon(
                            {
                                iconUrl: self.getIconForExploreItemType(exploreItem.type),
                                iconSize: [20, 20],
                                iconAnchor: [10, 15],
                                popupAnchor: [0, -28],
                            },
                        ),
                    });
                },
                onEachFeature: this.onEachFeature
            };
        }

        getIconForExploreItemType(type) {
            switch (type) {
                case ExploreItemType.CONFERENCE:
                    return '/conference.png';
                case ExploreItemType.WORKSHOP:
                    return '/workshop.png';
                default:
                    return null;
            }
        }

        clusterClick(e) {
            this.$emit('clusterClick', e);
        }

        @Watch('exploreItems')
        itemsChanged() {
            const self = this;
            self.drawCluster = false;
            Vue.nextTick(() => {
                self.drawCluster = true;
            });
        }

    }
</script>

<style lang="scss">
    #map {
        z-index: 0;
        height: 500px;
        width: 100%
    }
</style>

Whenever I embed or even import the component, I get ReferenceError: window is not defined at C:\Private\nuxt\node_modules\leaflet\dist\leaflet-src.js:230:17

Help would be greatly appreciated, I've been struggling with leaflet + nuxt for quite a time now...

how to use Leaflet.Icon.Glyph

Is there an example showing how to use Leaflet.Icon.Glyph ?

[Question] Disable scroll zoom functionality

thanks for this lil' module.

I'm trying to figure out how I can disable zoom feature with the scroll wheel, like embedded Google Maps. Pressing CTRL to zoom would be nice.

How can I access the map object to use javascript with it inside a component?

🧀

Problems using vue2-leaflet plugin vue2-leaflet-markercluster in Nuxt

Using nuxt-leaflet module I can set and use a lot of the component list: https://github.com/schlunsen/nuxt-leaflet/blob/master/lib/templates/plugin.js like l-marker, l-map, l-tile-layer, but my project also require to use https://github.com/Leaflet/Leaflet.markercluster wich has his own vue2-leaflet plugin:
https://korigan.github.io/Vue2Leaflet/#/plugins/
https://github.com/jperelli/vue2-leaflet-markercluster

What is the correct way to implement it?

I try this:

Create a plugins: vue2-leaflet-markercluster.js

import Vue from "vue";
import Vue2LeafletMarkerCluster from "vue2-leaflet-markercluster";
Vue.component("v-marker-cluster", Vue2LeafletMarkerCluster);
Vue.use(Vue2LeafletMarkerCluster);

Then set it in nuxt.config.js

  plugins: [
    { src: "~/plugins/vue2-leaflet-markercluster.js", mode: "client" }
  ],
  modules: [
    "@nuxtjs/axios",
    "@nuxtjs/pwa",
    "@nuxtjs/sitemap",
    "nuxt-leaflet"
  ],

and implemented in a page:

<script>
export default {
  head() {
    return {
      link: [
        {
          rel: "stylesheet",
          href:
            "https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css"
        },
        {
          rel: "stylesheet",
          href:
            "https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css"
        }
      ]
    };
  },
  data() {
    return {
      tileLayer: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      latitude: -34.477518,
      longitude: -58.496699,
      zoom: 10,
      options: { scrollWheelZoom: false },
      markers: [
        { markerLat: "-34.477518", markerpLng: "-58.496699" },
        { markerLat: "-34.808505", markerpLng: "-58.402064" },
        { markerLat: "-34.796024", markerpLng: "-58.388854" },
        { markerLat: "-34.678739", markerpLng: "-58.338006" },
        { markerLat: "-34.678269", markerpLng: "-58.367989" },
       ...
      ]
    };
  },
  mounted() {
    // eslint-disable-next-line no-console
    console.log(this.$L);
  }
};
</script>

The output:

It look great, the problem happens when I click over a cluster it give me this error:

Uncaught TypeError: Cannot read property '_removePath' of undefined

Error using l-popup component.

Hi there! First of all thanks for this great module.

I have this problems using l-popup component when click over a point:

Here is the code I have written in a page.

<template>
  <no-ssr>
    <l-map style="height: 100vh; width: 100%" :zoom="zoom" :center="center">
      <l-tile-layer :url="url"></l-tile-layer>
      <l-marker :lat-lng="markerLatLng">
        <l-popup><span>Hello!</span></l-popup>
      </l-marker>
    </l-map>
  </no-ssr>
</template>

<script>
export default {
  head() {
    return {
      link: [
        {
          rel: "stylesheet",
          href:
            "https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css"
        },
        {
          rel: "stylesheet",
          href:
            "https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css"
        }
      ]
    };
  },
  data() {
    return {
      url: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
      zoom: 8,
      center: [47.41322, -1.319482],
      markerLatLng: [47.31322, -1.319482]
    };
  },
  mounted() {
    // eslint-disable-next-line no-console
    console.log(this.$L);
  }
};
</script>

package verions:

"nuxt": "^2.5.1",
"nuxt-leaflet": "0.0.15",

How to change icons in Nuxt with Composition API

Hi, I love Leaflet and your Nuxt version, it is working flawless!
The only question I have is how can I change the markers? I have custom markers that I need to display but I am unable to change the markers so far. Can someone please explain this to me?

	<l-map
	:zoom="2"
	:center="[0, 0]"
	:max-zoom="4"
	:min-zoom="2"
	>
		<l-tile-layer
		url="https://mysite.com/maps/1/{z}/{x}/{y}.jpg"
		:no-wrap="true"
		/>
		<l-marker
		:lat-lng="[55.9464418,8.1277591]"
		/>
	</l-map>
</client-only>```

The above is working perfectly, but I have no clue how to change the icon of the markers when using the composition API.

Changing Styles - Implementing custom styling

Hello!

Just wanted to ask if anybody has changed styling for Leaflet map. If so could you give me a clue how do I do that with nuxt module?

Thank you

How would I go about adding a dynamic route to my markers?

How to load `nuxt-leaflet` locally?

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?

Nuxt leaflet in SPA mode

I'm new to Nuxt and I'm building a small SPA app to deploy to AWS S3 (nuxt mode is spa). I have a page where I'm using a map to pull in business locations and to plot them on the map. I'm using the setView property to attempt to use the client's location for setting the map's center.

All of this works perfectly fine in dev mode but not in production mode (npm run build && npm start). The map tiles are thrown all over the screen, I can't see any markers, and I don't get any console errors. I'm thinking this is something fundamental to Nuxt/Vue that I'm missing. Any ideas what that is? Thanks for any help!

Here's the code:

<template>
  <section class="bg-white mb-4" style="height: 75vh;">
    <div id="map-wrap" class="h-full">
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      tileLayer: null
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = L.map('map-wrap', { center: [33.500598, -86.796270], zoom: 18, zoomControl: false });
      this.map.locate({ setView: true, enableHighAccuracy: true, maximumAge: 15000})
        .on('locationfound', e => {
          this.setMarkers();
        })
        .on('locationerror', e => {
          this.map.panTo([33.500598, -86.796270]);
          this.setMarkers();
        });
      this.tileLayer = L.tileLayer(
        'https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}.png',
        {
          minZoom: 18,
          attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>',
        }
      );
      this.tileLayer.addTo(this.map);
      this.map.on('moveend', e => {
        this.setMarkers();
      })
    },
    setMarkers() {
      let markers = [];
      this.getBusinesses()
        .then(businesses => {
          markers = businesses;
          if (markers.length > 0) {
            const myIcon = L.divIcon({className: 'map-marker-icon'});
            for (const business of markers) {
              L.marker([business.latitude, business.longitude], { icon: myIcon })
                .addTo(this.map)
                .bindPopup(`<a href="/businesses/${business.id}">` + business.name + '</a><br/>' + business.address + '<br/>Scored <b>' + business.latest_inspection.score + '</b> on ' + business.latest_inspection.inspection_date);
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getBusinesses() {
      const latLong = this.map.getCenter();
      return new Promise((resolve) => {
        resolve(this.$axios.$get(`/businesses/geo-search?lat=${latLong.lat}&long=${latLong.lng}`));
      });
    }
  }
}
</script>

<style>
.map-marker-icon {
  background-image: url('~assets/img/marker-icon.png');
  background-color: transparent;
  background-size: cover;
  width: 20px !important;
  height: 32px !important;
}
</style>

Nuxt 3?

Any plans to support Nuxt/Vue 3 in the near future? RC will be out this month, and this is one of the modules I really need for one of my projects, that isn't officially Nuxt 3 ready yet.

Update l-icon-default component to l-icon, to enable HTML icons

It would be great to update or add the i-icon component to enable HTML icons. I would prefer to show place names with custom HTML/CSS than an image.

It looks like the l-icon-default will be deprecated next version too. Many thanks for this excellent Nuxt plugin!

How to use geoman.io with nuxt-leaflet ?

How to use the leaflet.pm project with nuxt-leaflet?

Error

Hello,

I'm getting : Module build failed: ValidationError: PostCSS Loader Invalid Options

Any idea ?

Regards

PS : Example is outdated v-map is now l-map

Changing options does not automatically reload

Hello,

I just noticed a problem with the management of reactive options from nuxt.

It seems we can't reactively change options without having to reload the page.

<btn append class="homepage__map-container__btn-zoom" type="info" @click="changeScroll">

<client-only>
    <l-map :zoom="5" :center="[55.9464418,8.1277591]" :options="{scrollWheelZoom: scrollWheelZoom}>
       <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
       <l-marker :lat-lng="[55.9464418,8.1277591]"></l-marker>
    </l-map>
</client-only>

data: function () {
    return {
       scrollWheelZoom: true
    }
},
methods:{
   changeScroll : async function () {
       this.scrollWheelZoom = false;
   },
}

However the change is done well in the vue console, but it has no effect ...

Thank you for your help!

Leaflet plugins

My apologies if this isn't the place to ask, but how would I go about adding leaflet plugins to nuxt-leaflet? I'm trying to achieve a feature where a user can click on a map to set some coordinates, IIRC there's a map interaction plugin that can help me achieve this.

L-control is missing.

When I install 'nuxt-leaflet' but I found 'L-control is missing.'
In your github's there is (https://github.com/schlunsen/nuxt-leaflet/blob/master/lib/templates/plugin.js)
when i deploy to heroku, heroku missed it.
plz, check your npm packages.

typescript definitions

Hi,

it'll be nice to have typescript types definitions. vue-leaflet has them, I think only $L would need to be documented

exemple of a nuxt module adding typings : nuxt-community/sentry-module#84

Window not defined: SSR error with custom marker

Hi there!

I'm using a custom marker with the following template code:

<l-marker
   class="marker"
   v-for="(item, index) in firebase"
   :key="index"
   :lat-lng="[item.location.lat, item.location.lng]"
   :icon="getIcon(item)">
</l-marker>

The line :icon="getIcon(item)" calls a method:

getIcon(item) {
      return L.divIcon({
        className: "my-custom-pin",
        html: `<svg class="map-marker" width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.906113418">
            <g id="V2-Invisible-World-Mode" transform="translate(-1029.000000, -281.000000)" fill="#FF4642">
              <circle id="Oval-Copy-5" filter="url(#filter-1)" cx="1059" cy="311" r="30"></circle>
            </g>
          </g>
        </svg>`
      });
    }

In order to work this needs the following line at the top:

import L from 'leaflet';

However, this then results in the error: ReferenceError: window is not defined.

I looked around and this is related to the Server Side Rendering of Nuxt. However, I wasn't able to solve the problem. Any hints would be greatly appreciated!

How to implement custom options?

Doc says:

['nuxt-leaflet', { /* module options */ }],

But there is no example. Anybody could help on that?

can't found the support for edgemarker

hi i wanna implement a library with this module
here is the github link of edgemarker
https://github.com/ubergesundheit/Leaflet.EdgeMarker
is there any method to implement it with nuxt js???

Options? What are they?

Just wondering what

['nuxt-leaflet', { /* module options */ }],

What are the available options?
Are they specific to this module / leaflet module / Vue2Leaflet component.

If you could provide a list of what these options are that are available and from where to reference from would be great.

Thanks

how to apply different map styles

i would like to change the map layout (color etc) on overall layout changes, i did found this resource:
https://leaflet-extras.github.io/leaflet-providers/preview/
but i have no idea how to implement it with nuxt-leaflet.
Help is appreciated. Thanks

Typo in plugin.js

I guess "l-lwms-tile-layer" should be "l-wms-tile-layer" on line 25 in plugin.js?

Vue.component('l-lwms-tile-layer', Vue2Leaflet.LWMSTileLayer)

How to change CRS?

I changed the CRS mode to simple because I am making a game map. The problem I have now is that the names of the tiles (png images) changed. I am using https://github.com/bramus/photoshop-google-maps-tile-cutter to create my tiles so I have no influence on the names used.

Is there any way to fix this?

Unknown custom element: <l-control>

Hi,

Firstly, love this plugin. Everything else is working perfectly, however, I am trying to use an l-control element and get the following error message:

Unknown custom element: <l-control> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

My template looks like:

<template>
  <div v-if="locationsLoaded">
     <div id="map-wrap" style="height: 100vh">
         <no-ssr>
           <l-map :zoom=12.75 :center="[55.953251, -3.188267]">
             <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
              <l-control position="bottomleft" >
                  <button @click="goHome">
                    I am a useless button!
                  </button>
              </l-control>
             <l-marker v-for="(location, index) in locations"
                
                :key="index"
                ref="markersRef"
                :lat-lng="[location.latitude, location.longitude]"
              >
                    <l-popup>
                        {{location.location}}<br>
                        PCs available: {{location.free}}<br> 
                        Total PCs: {{location.seats}}
                    </l-popup> 
              </l-marker>
           </l-map>
         </no-ssr>
     </div>
  </div>
  <div v-else>
    <p> Loading map ...</p>
  </div>
</template>

Thanks in advance for your help.

Write tests

How use latLngBounds in Nuxt?

How use latLngBounds in Nuxt? If import { latLngBounds } from "leaflet"; in component. This good work in vue2, but not work in Nuxt. I have error on page - ReferenceError window is not defined. This is related to the server-side-rendered.

L.Label is not a constructor

I want to implement solution from this answer but received L.Label is not a constructor error.

Window is not defined. When ssr: set to true in nuxt.config

Hi.

There is no problem if Nuxt is set as non SSR in nuxt.config.js - ssr: false
But I'm using Nuxt because I need SSR.

And sadly I see error Window is not defined. I have wrapped the map in <client-only> Also I wrapped whole component into <client-only> just in case. But this didn't help.

Basically If I'm not importing anything from vue2-leaflet (I'm using nuxt-leaflet pack but I have to import some stuff from vue2-leaflet) everything works.
But as soon as I do e.g in my component:
import { LWMSTileLayer } from "vue2-leaflet" I'm getting the Window error.

Edit:
Ofc I can do:
vue-leaflet/Vue2Leaflet#207 (comment)
But then what is the point of this module anyway?

Update npm-publish-git-tag to @hutson/npm-deploy-git-tag

npm-publish-git-tag package has been deprecated as described here.

Advice from the package author is to update dependency to use @hutson/npm-deploy-git-tag.

There is a sub-dependency (trim-newlines) flagged by GitHub dependabot for as a High Severity for Regular Expression Denial of Service in trim-newlines

nuxt-leaflet > npm-publish-git-tag > git-latest-semver-tag > meow > trim-newlines

Update vue2-leaflet

There is a bug concerning the lat-lng.sync functionality for the marker (vue-leaflet/Vue2Leaflet#274) which was fixed in release 1.2.1. Please update :)

And of course thanks for making this module in the first place!