diff --git a/packages/vue-mapbox-gl/components/MapboxMap.vue b/packages/vue-mapbox-gl/components/MapboxMap.vue
index 3cc6adc..8f6e85a 100644
--- a/packages/vue-mapbox-gl/components/MapboxMap.vue
+++ b/packages/vue-mapbox-gl/components/MapboxMap.vue
@@ -252,10 +252,11 @@
 </script>
 
 <script setup>
-  import { ref, computed, onMounted, onUnmounted, provide } from 'vue';
+  import { ref, computed, onMounted, onUnmounted, provide, useAttrs } from 'vue';
   import { useEventsBinding, usePropsBinding } from '../composables/index.js';
 
   const props = defineProps(propsConfig);
+  const attrs = useAttrs();
   const emit = defineEmits();
 
   const map = ref();
@@ -280,7 +281,7 @@
   onMounted(() => {
     mapboxgl.accessToken = props.accessToken;
 
-    map.value = new mapboxgl.Map(options.value);
+    map.value = new mapboxgl.Map({ ...options.value, ...attrs });
     map.value.on('load', () => {
       isLoaded.value = true;
     });
diff --git a/packages/vue-mapbox-gl/components/MapboxPopup.vue b/packages/vue-mapbox-gl/components/MapboxPopup.vue
index e71cbda..fed9f02 100644
--- a/packages/vue-mapbox-gl/components/MapboxPopup.vue
+++ b/packages/vue-mapbox-gl/components/MapboxPopup.vue
@@ -68,10 +68,11 @@
 </script>
 
 <script setup>
-  import { ref, computed, onMounted, onUnmounted } from 'vue';
+  import { ref, computed, onMounted, onUnmounted, useAttrs } from 'vue';
   import { useMap, usePropsBinding, useEventsBinding } from '../composables/index.js';
 
   const props = defineProps(propsConfig);
+  const attrs = useAttrs();
   const emit = defineEmits();
 
   const popup = ref();
@@ -87,7 +88,9 @@
   onMounted(() => {
     const { map } = useMap();
 
-    popup.value = new Popup(options.value).setLngLat(props.lngLat).setDOMContent(root.value);
+    popup.value = new Popup({ ...options.value, ...attrs })
+      .setLngLat(props.lngLat)
+      .setDOMContent(root.value);
 
     if (!props.renderless) {
       popup.value.addTo(map.value);