Performance issues when using Nuxt devtools

[EntrenaEnCasa]

I have the bare minimum implementation, however, when trying to drag the Marker it is extremely slow.

here's the implementation:

<template>
    <div class="">
        <MapboxMap map-id="1" style="position: absolute; top: 0; bottom: 0; left: 250px; width: 500px;" :options="{
            style: 'mapbox://styles/mapbox/streets-v12',
            center: [-71.593916, -33.040681],
            zoom: 15
        }">
            <MapboxDefaultMarker marker-id="<MARKER_ID>" :options="{ draggable: true }" :lnglat="[-71.593916, -33.040681]">
            </MapboxDefaultMarker>
        </MapboxMap>
    </div>
</template>

Am I doing something wrong? thanks in advance.

[AlexLavoie42]

Running this in the playground is very snappy on my end, however this could be highly dependent on your system.

Doing a performance test I am getting very similar results to using mapbox without the module.

Do you have the same performance problems in this mapbox example? https://docs.mapbox.com/mapbox-gl-js/example/drag-a-marker/

[EntrenaEnCasa]

Hi!

Do you have the same performance problems in this mapbox example?

No, in the example it works perfectly, no lag at all. By the way, I tested a little bit and I noticed something very strange.

so this is my new code:

<template>
    <div class="">
        <MapboxMap map-id="1" style="position: absolute; top: 0; bottom: 0; left: 250px; width: 500px;" :options="{
            style: 'mapbox://styles/mapbox/streets-v12',
            center: [-71.593916, -33.040681],
            zoom: 15
        }">
            <MapboxDefaultMarker marker-id="10" @dragend="setCoordinates" :options="{ draggable: true }"
                :lnglat="coordinates">
            </MapboxDefaultMarker>
        </MapboxMap>
    </div>
</template>

<script setup>
const marker = useMapboxMarkerRef(10);

const coordinates = ref([-71.593916, -33.040681]);

const setCoordinates = () => {
    coordinates.value = markerLngLat.value;
    console.log(coordinates.value);
};

const markerLngLat = computed(() => {
    return marker.value?.getLngLat();
});

</script>

And now when I first drag, it is very slow. But then on the second drag, it is very snappy. I tried adding on the onMounted lifecycle hook the setCoordinatesfunction, and it fixes the problem completely. So my conclusion is: for some reason when setting coordinates with marker.value?.getLngLat(); it fixes the lag issue, somehow. But I am unsure why this could be happening.

[EntrenaEnCasa]

ok so I think I found the problem. Instead of using the coordinates as an array [-71.593916, -33.040681], I replaced it with an object like this { lng: -71.593916, lat: -33.040681 } and it fixed all the issues. I came to this conclusion by console logging the marker.value?.getLngLat(), and realizing that when this value was set to the coordinates, it would fix the issue. And the console log was showing the object that I just mentioned.

[EntrenaEnCasa]

I did some further testing: I just set up a Nuxt project from scratch, and the only thing I installed was the Nuxt Mapbox Module, but I am still getting performance issues when drragin the marker. I tried copying and pasting my code to your playground, and it is very snappy. So I am not sure the problem is my computer or how I implemented the Module in my project, but I followed every step in the documentation. Also important to note: The official mapbox documentation has a ton of examples, and at least on my end, everything works perfectly, super smooth and fast.

Could you please try to setup a Nuxt project from scratch on your PC and try installing the module and then checking if you have the same performance issues that I do? My PC specs are good enough if you are wondering.

[EntrenaEnCasa]

Even futher testing:

So I literally went to the playground and downloaded the project. I tested it and it worked perfectly on my PC, no lag at all. So I realized my machine was never the problem. I realized the problem had to do with the way I installed the module or how it was configured. And that's exactly what happened. I started removing everything and see what would make the performance degrade and and this was it:

devtools: { enabled: true },

As simple as that line, it was causing all the performance degradations, and turning off the devtools fixed all the performance issues. I'll leave the issue open just in case it has something to do with the implementation of the module

[AlexLavoie42]

🤦‍♂️ I've known about this for a while but completely forgot.

I've already filed an issue for it here a while ago: https://github.com/nuxt/devtools/issues/481

I will leave this open so there is a reference to it here