URL scheme "mapbox" is not supported

[nirpan]

I have been having this issue since the last version and was hoping the latest release would fix it but unfortunately this issue still persists.

I have the following component to render the map in Vue 3:

<script setup>
import 'mapbox-gl/dist/mapbox-gl.css'
import { VMap } from "v-mapbox";
import {reactive} from "vue";

const state = reactive({
  map: {
    container: "map-container",
    accessToken: "[access token]",
    style: "mapbox://styles/mapbox/streets-v11?optimize=true",
    // style: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json", 
    center: [-74.5, 40],
    zoom: 5,
  },
});
</script>

<template>
  <div
      id="map-container"
      class="map-container position-relative"
      style="height: 500px"
  >
    <v-map options="{...state.map}"  />
  </div>
</template>

This throws the following error:

The reason for this seems to be in maplibre-gl-js 2.x, the mapbox:// url scheme has been dropped and if I use the commented out style option, the map loads as expected. Is there any chance of this getting fixed?

I have also tried the https://api.mapbox.com/styles/v1/ URL but the fragments still load with the mapbox url scheme. This is my pacakge.json.

{
  "name": "v-mapbox",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test:unit": "vitest"
  },
  "dependencies": {
    "mapbox-gl": "^3.1.2",
    "v-mapbox": "^5.0.0",
    "vue": "^3.4.15"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.3",
    "@vue/test-utils": "^2.4.4",
    "jsdom": "^24.0.0",
    "vite": "^5.0.11",
    "vitest": "^1.2.2"
  }
}