Issue with using Marker in Vue 3

[UXandre]

Hi, first of all thank you for maintaining the amazing package. I managed to add the map in Vue 3 through composition API but have an issue when trying to add the marker.

This is the error I got

[Vue warn]: Missing required prop: "options" 
[Vue warn]: Missing required prop: "popupOptions" 
[Vue warn]: Unhandled error during execution of setup function 

When adding the marker, the whole component can't be resolved. Can't figure out why. I noticed there is a variation between the prop names used in the document and the ones actually used in the examples. Would it be the reason? If so, what prop names I should use for VMarker for vue 3?

Thank you!

<template>
    <v-map class="w-full h-full" :options="state.map">
       // The following line causes the issue.
        <v-marker :coordinates="coordinates" color="blue" />
    </v-map>
</template>

<script>
import { VMap, VMarker } from "v-mapbox";
import { reactive } from "vue";
import Mapbox from "mapbox-gl";

export default {
    components: {
        VMap,
        VMarker
    },
    setup() {
        const state = reactive({
            map: {
                accessToken:
                    "pk.eyJ1xxxxxxxxxxxxxxxfdsfasfsdfsadfasfdfdsfaketoken",
                center: [-0.0995, 51.5244],
                zoom: 11,
                maxZoom: 22,
                crossSourceCollisions: false,
                failIfMajorPerformanceCaveat: false,
                attributionControl: false,
                preserveDrawingBuffer: true,
                hash: false,
                minPitch: 0,
                maxPitch: 60
            }
        });

        const coordinates = [-0.0995, 51.5244];
        console.log(coordinates);

        return {
            state,
            coordinates
        };
    }
};
</script>

<style lang="scss">
@import "mapbox-gl/dist/mapbox-gl.css";
@import "v-mapbox/dist/v-mapbox.css";
</style>

Update

After digging into the errors, I've made a bit of progress. It seems like the color needs to be specified in the option prop. And the popupOption needs to be added too. This is a bit confusing to me as I would simply like to get it up and running with all the default setup. I had to pass an empty object like {} to the VMarker component to avoid the error. After I did so, my code became:

<template>
    <v-map class="w-full h-full" :options="state.map">
     
       <VMarker
            :coordinates="coordinates"
            :options="{ color: 'blue' }"
            :popupOptions="{}"
        />
    </v-map>
</template>

Now I get these errors:

[Vue warn]: Unhandled error during execution of setup function 
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug

[vinayakkulkarni]

Can you please create a repro ?

[UXandre]

@vinayakkulkarni sure. Here goes the codesandbox repro

Thank you!

[manualy]

I have a similar problem with the marker, it requires :options (can't find anything about them in the docs), also when I add a random option eq: color, the map doesn't load, everything works fine until I try to add the VMarker.

[UXandre]

@vinayakkulkarni hope you had a wonderful weekend! Have you got a chance to look at the issue?

[vinayakkulkarni]

@vinayakkulkarni hope you had a wonderful weekend! Have you got a chance to look at the issue?

Hey @UXandre, unfortunately I didn’t get a chance to review this last weekend but will take a look this week

[UXandre]

@vinayakkulkarni sounds good and thank you so much!

[vinayakkulkarni]

https://codesandbox.io/s/v-mapbox-w-marker-s-om6yys

I forked this and set up v-mapbox w/ marker, I'll check the events as well

[UXandre]

@vinayakkulkarni thanks so much! By simply copy and pasting I managed to get the marker up and running. Will spend some time to digest the logic of the code later today. What events are you referring to?