Vue2Leaflet | Vue 2 components for Leaflet maps | Frontend Framework library

I am trying to render a Leaflet map using Vue2Leaflet in a jsfiddle so I can get help with a specific problem but I can't even get it to render properly in the trivial case. I have already looked up how to load libraries via CDN in jsfiddle and a far as I can tell, I am doing it right. There are also no errors in the console. But the map will not render.

This is the jsfiddle: https://jsfiddle.net/iboates/bywzgf1q/3/

Vue2Leaflet also requires the vue-client-only library. I have it working in my local codebase but maybe it has something to do with why it isn't working in jsfiddle. I am also loading this library via a CDN.

I've also looked at other jsfiddles using Vue with custom libraries loaded via CDN and I don't see what is being done differently.

Apparently StackOverflow requires that a jsfiddle link requires code in the post as well, which is a bit weird to me since the code is literally contained in a link which can also execute it, but here it goes:

I am creating an app with a Leaflet map in Nuxt using Vue2Leaflet plugin.

I am having a problem though: I am using Bootstrap columns to size the map and accompanying image, but the image loads too slow (this cannot be resolved at this time), so the container is not the proper size when the map loads.

This causes the map to be half grey. I have attempted to call map.invalidateSize() in the mounted event, but even that must be happening before the image finishes loading.

I have setup a sandbox at: https://codesandbox.io/s/eager-bohr-c3453?file=/src/App.vue

In order to see the bug, you have to view the rendered app at https://c3453.csb.app/ (the internal codesandbox render does not show the problem)

I think I need some way to wait until the image has completed loading (so the BS col is the proper size), then call map.invalidateSize(), but I am not sure how...

I have angular 10 app using ngx-leaflet and routing. I have a map component, which dynamically displays custom markers on map, based on user selection. I navigate from map component view to another component. Then I navigate back to map component. User can change date, and based on that, old layer of markers is removed and new layer of markers is loaded and shown. Everything works fine, but I always get this error:

I have a variable list of geoJson layers (that I'm naming as sectors) on my map. I need to center the view to fit all geometries.

I'm using Vue2Leaflet (v2.5.2) and Leaflet (v1.6.0).

Each geoJson object is like this:

My first ever Vue.JS / Vue2Leaflet app works fine on codesandbox.io, but when I download the ZIP and open the index.html file, it is blank?

Do I need to do something to the code base (compile? install additional dependencies?) before it works? I am looking for something I can upload on a server...

Alternatively, how difficult would it be to convert this to a single .html page? (Single File Component?)

On my Vuetify + Lealflet project the map hides all popup dialogs and I don't know why. I use Vue2Leaflet library. I am a beginner with web development. Here is a pic of the problem:

I use Vue2Leaflet and Leaflet-semicircle. I don't have a problem when using Vue2Leaflet, but I don't know how to use Leaflet-semicircle in my VueJS project.

In my @vue/cli 4.1.1 app I added Vue2Leaflet and with this example https://jsfiddle.net/bezanyu/ptmg5hy7/

I created set of markers from array and I need to make some ofmarkers with opened popup content if field opened from its structure equals true. Peovided example have such functionality, buit for 1 static marker.

I try to do is programmatically as :

I have Vue SPA that I'm trying to migrate to nuxt. I am using vue2leaflet in a component that I enclosed in tags but still getting an error from nuxt saying that window is not defined.

I know I could use nuxt-leaflet or create a plugin but that increases the vendor bundle dramatically and I don't want that. I want to import the leaflet plugin only for the components that need it. Any way to do this?