Fix build issues

Author: Gugustinette

docs/.vitepress/config.ts

@@ -64,5 +64,6 @@ export default defineConfig({
       { icon: 'github', link: 'https://github.com/Gugustinette/Nuxt-Leaflet' },
       { icon: 'npm', link: 'https://www.npmjs.com/package/nuxt3-leaflet' }
     ]
-  }
+  },
+  ignoreDeadLinks: true
 })

docs/components/l-circle-marker.md

@@ -9,9 +9,13 @@ outline: deep
 ## Demo
 
 <script setup>
-import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import { LMap, LTileLayer, LCircleMarker } from '@vue-leaflet/vue-leaflet';
+import { onMounted } from 'vue';
+
+onMounted(() => {
+  import('leaflet')
+})
 </script>
 
 <LMap style="height: 350px" :zoom="8" :center="[47.21322, -1.559482]">

docs/components/l-circle.md

@@ -11,9 +11,13 @@ outline: deep
 ## Demo
 
 <script setup>
-import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import { LMap, LTileLayer, LCircle } from '@vue-leaflet/vue-leaflet';
+import { onMounted } from 'vue';
+
+onMounted(() => {
+  import('leaflet')
+})
 </script>
 
 <LMap style="height: 350px" :zoom="8" :center="[47.21322, -1.559482]">

docs/components/l-control-attribution.md

@@ -9,9 +9,13 @@ outline: deep
 ## Demo
 
 <script setup>
-import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import { LMap, LTileLayer, LControlAttribution } from '@vue-leaflet/vue-leaflet';
+import { onMounted } from 'vue';
+
+onMounted(() => {
+  import('leaflet')
+})
 </script>
 
 <LMap style="height: 350px" :zoom="8" :center="[47.21322, -1.559482]">

docs/components/l-control-layers.md

@@ -9,9 +9,13 @@ outline: deep
 ## Demo
 
 <script setup>
-import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import { LMap, LTileLayer, LControlLayers } from '@vue-leaflet/vue-leaflet';
+import { onMounted } from 'vue';
+
+onMounted(() => {
+  import('leaflet')
+})
 </script>
 
 <LMap style="height: 350px" :zoom="8" :center="[47.21322, -1.559482]">

docs/components/l-control-scale.md

@@ -9,9 +9,13 @@ outline: deep
 ## Demo
 
 <script setup>
-import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import { LMap, LTileLayer, LControlScale } from '@vue-leaflet/vue-leaflet';
+import { onMounted } from 'vue';
+
+onMounted(() => {
+  import('leaflet')
+})
 </script>
 
 <LMap style="height: 350px" :zoom="8" :center="[47.21322, -1.559482]">

docs/components/l-control-zoom.md

@@ -9,9 +9,13 @@ outline: deep
 ## Demo
 
 <script setup>
-import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import { LMap, LTileLayer, LControlZoom } from '@vue-leaflet/vue-leaflet';
+import { onMounted } from 'vue';
+
+onMounted(() => {
+  import('leaflet')
+})
 </script>
 
 <LMap style="height: 350px" :zoom="8" :center="[47.21322, -1.559482]">

docs/components/l-control.md

@@ -9,9 +9,13 @@ outline: deep
 ## Demo
 
 <script setup>
-import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import { LMap, LTileLayer, LControl } from '@vue-leaflet/vue-leaflet';
+import { onMounted } from 'vue';
+
+onMounted(() => {
+  import('leaflet')
+})
 
 const clickHandler = () => {
   alert('and mischievous');

docs/components/l-feature-group.md

@@ -13,9 +13,13 @@ This still needs better documentation and examples.
 ## Demo
 
 <script setup>
-import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import { LMap, LTileLayer, LFeatureGroup, LMarker } from '@vue-leaflet/vue-leaflet';
+import { onMounted } from 'vue';
+
+onMounted(() => {
+  import('leaflet')
+})
 </script>
 
 <LMap style="height: 350px" :zoom="8" :center="[47.21322, -1.559482]">

docs/components/l-geo-json.md

@@ -9,7 +9,6 @@ outline: deep
 ## Demo
 
 <script setup>
-import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import { LMap, LTileLayer, LGeoJson } from '@vue-leaflet/vue-leaflet';
 import { ref, onMounted } from 'vue'
@@ -20,10 +19,12 @@ const geoStyler = (feature) => ({
 })
 
 onMounted(async () => {
-  const response = await fetch(
-    "https://rawgit.com/gregoiredavid/france-geojson/master/regions/pays-de-la-loire/communes-pays-de-la-loire.geojson"
-  );
-  geojson.value = await response.json();
+  import('leaflet').then(async () => {
+    const response = await fetch(
+      "https://rawgit.com/gregoiredavid/france-geojson/master/regions/pays-de-la-loire/communes-pays-de-la-loire.geojson"
+    );
+    geojson.value = await response.json();
+  });
 });
 </script>