Vue2-Leaflet with No-SSR causes Window is not defined error - vue.js

Question

I've been trying a bunch of stuff now. I've tried nuxt-leaflet dependency, I've tried writing my own plugin and including it. However, everything keeps ending in the "window is not defined" error.
The map should only be loaded on the client.
My vue 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 {latLng, marker} from 'leaflet';
import {ExploreItemType} from '~/components/explore/ExploreItem';
import {Component} from "nuxt-property-decorator";
#Component()
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 © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox';
zoom = 3;
center = latLng(51.505, -0.09);
drawCluster = true;
}
</script>
So I wrote my own plugin in plugins/vue-leaflet.ts
import Vue from 'vue'
import Vue2Leaflet from 'vue2-leaflet'
import Vue2LeafletMarkerCluster from 'vue2-leaflet-markercluster';
Vue.component('l-circle', Vue2Leaflet.LCircle);
Vue.component('l-geo-json', Vue2Leaflet.LGeoJson);
Vue.component('l-icon-default', Vue2Leaflet.LIconDefault);
Vue.component('l-layer-group', Vue2Leaflet.LLayerGroup);
Vue.component('l-map', Vue2Leaflet.LMap);
Vue.component('l-marker', Vue2Leaflet.LMarker);
Vue.component('l-popup', Vue2Leaflet.LPopup);
Vue.component('l-tile-layer', Vue2Leaflet.LTileLayer);
Vue.component('l-tooltip', Vue2Leaflet.LTooltip);
And included it in the nuxt.config.js
{src: "~/plugins/vue-leaflet.ts", ssr: false}
No matter what I've tried, I always end up getting the window is not defined error. I'm out of ideas.

Answer 1

Its because in your component you do
import {latLng, marker} from 'leaflet';
Which probably will do some window check and fail straight away. So you need to import it conditionally with if (process.client) check

Answer 2

Thanks to the hint from Aldarund, I got this to work:
<template>
<div>
<no-ssr>
<l-map
id="map"
:zoom="zoom"
:min-zoom="3"
:center="center"
>
<l-tile-layer :url="url" :attribution="attribution"/>
....
</l-map>
</no-ssr>
</div>
</template>
<script lang="ts">
const isBrowser = typeof window !== 'undefined';
let leaflet;
if (isBrowser) {
leaflet = require('leaflet');
}
import Vue from 'vue';
import {Component, Prop, Watch} from "nuxt-property-decorator";
#Component({})
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 © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox';
zoom = 3;
center;
created() {
if (isBrowser) {
this.center = leaflet.latLng(51.505, -0.09);
}
....
}