diff --git a/docs/examples/basic.vue b/docs/examples/basic.vue
index 3bdab28..40bca55 100644
--- a/docs/examples/basic.vue
+++ b/docs/examples/basic.vue
@@ -18,7 +18,7 @@ import {
   MglNavigationControl,
 } from '@indoorequal/vue-maplibre-gl';
 
-const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=cQX2iET1gmOW38bedbUh';
+const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=3YeFnghdqUJJpIvlgLti';
 const center = [12.550343, 55.665957];
 const zoom = 8;
 </script>
diff --git a/docs/examples/custom-marker.vue b/docs/examples/custom-marker.vue
index a92635b..4be3a38 100644
--- a/docs/examples/custom-marker.vue
+++ b/docs/examples/custom-marker.vue
@@ -22,7 +22,7 @@ import {
   MglMarker
 } from '@indoorequal/vue-maplibre-gl';
 
-const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=cQX2iET1gmOW38bedbUh';
+const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=3YeFnghdqUJJpIvlgLti';
 const center = [12.550343, 55.665957];
 const zoom = 8;
 const coordinates = [12.550343, 55.665957];
diff --git a/docs/examples/example.data.js b/docs/examples/example.data.js
index ee3da76..67d143e 100644
--- a/docs/examples/example.data.js
+++ b/docs/examples/example.data.js
@@ -16,14 +16,14 @@ export default {
 <script setup>
 import { defineClientComponent } from 'vitepress';
 
-const Example = defineClientComponent(() => {
-  return import('./${path.basename(file)}');
-})
+const Example = defineClientComponent(
+  () => import('./${path.basename(file)}')
+);
 </script>
 
 <Example />
 \`\`\`vue
-${vueContent.slice(3).join('\n')}
+${vueContent.slice(3).join('\n').replaceAll('?key=', '?key=get_your_own_api_key_')}
 \`\`\`
 `;
       return {
diff --git a/docs/examples/geojson.vue b/docs/examples/geojson.vue
index 6a555c8..18a206c 100644
--- a/docs/examples/geojson.vue
+++ b/docs/examples/geojson.vue
@@ -29,7 +29,7 @@ import {
   MglLineLayer,
 } from '@indoorequal/vue-maplibre-gl';
 
-const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=cQX2iET1gmOW38bedbUh';
+const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=3YeFnghdqUJJpIvlgLti';
 const center = [ -122.483696, 37.833818 ];
 const zoom = 15;
 
diff --git a/docs/examples/marker-draggable.vue b/docs/examples/marker-draggable.vue
index 026b9df..3c1d634 100644
--- a/docs/examples/marker-draggable.vue
+++ b/docs/examples/marker-draggable.vue
@@ -30,7 +30,7 @@ import {
 } from '@indoorequal/vue-maplibre-gl';
 import { ref } from 'vue';
 
-const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=cQX2iET1gmOW38bedbUh';
+const style = `https://api.maptiler.com/maps/streets-v2/style.json?key=3YeFnghdqUJJpIvlgLti`;
 const center = [12.550343, 55.665957];
 const zoom = 8;
 const coordinates = ref([12.550343, 55.665957]);
diff --git a/docs/examples/marker-popup.vue b/docs/examples/marker-popup.vue
index dc22ce3..4438cac 100644
--- a/docs/examples/marker-popup.vue
+++ b/docs/examples/marker-popup.vue
@@ -28,7 +28,7 @@ import {
 } from '@indoorequal/vue-maplibre-gl';
 import { useTemplateRef } from 'vue'
 
-const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=cQX2iET1gmOW38bedbUh';
+const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=3YeFnghdqUJJpIvlgLti';
 const center = [12.550343, 55.665957];
 const zoom = 8;
 const coordinates = [12.550343, 55.665957];
diff --git a/docs/examples/marker.vue b/docs/examples/marker.vue
index 039988c..c5bfd3d 100644
--- a/docs/examples/marker.vue
+++ b/docs/examples/marker.vue
@@ -20,7 +20,7 @@ import {
   MglMarker
 } from '@indoorequal/vue-maplibre-gl';
 
-const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=cQX2iET1gmOW38bedbUh';
+const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=3YeFnghdqUJJpIvlgLti';
 const center = [12.550343, 55.665957];
 const zoom = 8;
 const coordinates = [12.550343, 55.665957];
diff --git a/docs/examples/playground.vue b/docs/examples/playground.vue
index d763f98..ce44da4 100644
--- a/docs/examples/playground.vue
+++ b/docs/examples/playground.vue
@@ -76,7 +76,7 @@ import {
 import { mdiCursorDefaultClick } from '@mdi/js';
 import { LngLatLike, MapLayerMouseEvent } from 'maplibre-gl';
 
-MglDefaults.style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=cQX2iET1gmOW38bedbUh';
+MglDefaults.style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=3YeFnghdqUJJpIvlgLti';
 
 export default defineComponent({
   name      : 'App',
diff --git a/docs/examples/popup.vue b/docs/examples/popup.vue
index d3f2226..9f772d0 100644
--- a/docs/examples/popup.vue
+++ b/docs/examples/popup.vue
@@ -27,7 +27,7 @@ import {
 } from '@indoorequal/vue-maplibre-gl';
 import { ref } from 'vue'
 
-const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=cQX2iET1gmOW38bedbUh';
+const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=3YeFnghdqUJJpIvlgLti';
 const center = [12.550343, 55.665957];
 const zoom = 8;
 const coordinates = [12.550343, 55.665957];
diff --git a/docs/examples/use-control.vue b/docs/examples/use-control.vue
index 184ae62..0ed8a8f 100644
--- a/docs/examples/use-control.vue
+++ b/docs/examples/use-control.vue
@@ -21,7 +21,7 @@ import { defineComponent } from 'vue';
 import maplibregl from 'maplibre-gl';
 import MaplibreInspect from '@maplibre/maplibre-gl-inspect';
 
-const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=cQX2iET1gmOW38bedbUh';
+const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=3YeFnghdqUJJpIvlgLti';
 const center = [12.550343, 55.665957];
 const zoom = 8;
 
diff --git a/docs/examples/use-map.vue b/docs/examples/use-map.vue
index 831cfb6..7095f4c 100644
--- a/docs/examples/use-map.vue
+++ b/docs/examples/use-map.vue
@@ -29,7 +29,7 @@ import {
 } from '@indoorequal/vue-maplibre-gl';
 import { watch } from 'vue';
 
-const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=cQX2iET1gmOW38bedbUh';
+const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=3YeFnghdqUJJpIvlgLti';
 const center = [12.550343, 55.665957];
 const zoom = 8;
 const mapOne = useMap();
diff --git a/docs/examples/vector.vue b/docs/examples/vector.vue
index 857c109..2ef7450 100644
--- a/docs/examples/vector.vue
+++ b/docs/examples/vector.vue
@@ -30,7 +30,7 @@ import {
 } from '@indoorequal/vue-maplibre-gl';
 import { CircleLayerSpecification, LineLayerSpecification, LngLatLike, MapLayerMouseEvent } from 'maplibre-gl';
 
-const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=cQX2iET1gmOW38bedbUh';
+const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=3YeFnghdqUJJpIvlgLti';
 
 const center = [-3.002233964444031, 53.71773428766181];
 const zoom = 5;
diff --git a/docs/examples/video.vue b/docs/examples/video.vue
index bbfd5be..1df9f96 100644
--- a/docs/examples/video.vue
+++ b/docs/examples/video.vue
@@ -21,7 +21,7 @@ import {
   MglRasterLayer
 } from '@indoorequal/vue-maplibre-gl';
 
-const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=cQX2iET1gmOW38bedbUh';
+const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=3YeFnghdqUJJpIvlgLti';
 const center = [-122.514426, 37.562984];
 const zoom = 17;
 const urls = ['https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4', 'https://static-assets.mapbox.com/mapbox-gl-js/drone.webm'];
diff --git a/docs/examples/vmodelprops.vue b/docs/examples/vmodelprops.vue
index aa462e2..3c24fcf 100644
--- a/docs/examples/vmodelprops.vue
+++ b/docs/examples/vmodelprops.vue
@@ -30,7 +30,7 @@ import {
 } from '@indoorequal/vue-maplibre-gl';
 import { ref } from 'vue';
 
-const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=cQX2iET1gmOW38bedbUh';
+const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=3YeFnghdqUJJpIvlgLti';
 const center = ref([12.550343, 55.665957]);
 const zoom = ref(8);
 const pitch = ref(0);