Rendering a vue2leaflet map in jsfiddle via CDN

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:

HTML:

<div id="app">
<client-only>
      <l-map id="map" ref="map">
      <l-tile-layer
        :attribution="'x'"
        :url="'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'"
      />
<!--         <l-geo-json
          :geojson="geojsonData"
        /> -->
      </l-map>
      </client-only>
</div>

JS:

import { LMap, LTileLayer } from "./vue2-leaflet";

new Vue({
  el: "#app",
  components: {
    LMap,
    LTileLayer,
    ClientOnly
  },
  data: {
    geojsonData: {
        type: "FeatureCollection",
        features: []
      }
  },
  mounted() {
  }
})

CSS

#app {
  background-color: black;
  height: 500px;
  width: 500px;
}

#map {
  height: 500px;
  width: 500px;
}

Solution

There are multiple errors in your fiddle.

First of all, Vue is not installed. In addition, you try to import Vue-Leaflet like in a Webpack / Rollup build system and not the way you can use it from a CDN.

To begin with, install your CDN (Vue, Leaflet CSS, Leaflet js, Vue-Leaflet):

https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js
https://unpkg.com/leaflet@1.7.1/dist/leaflet.css
https://unpkg.com/leaflet@1.7.1/dist/leaflet.js
https://unpkg.com/vue2-leaflet@2.6.0/dist/vue2-leaflet.min.js

Then, add your components the CDN-way (check official documentation: https://vue2-leaflet.netlify.app/quickstart/#if-imported-by-cdn ):

components: {
    'l-map': window.Vue2Leaflet.LMap,
    'l-tile-layer': window.Vue2Leaflet.LTileLayer
}

Check working fiddle: https://jsfiddle.net/scpta4jq/1/