How to Integrate Leaflet with Mapbox GL In vuejs

I am trying to integrate Leaflet in mapbox GL so we can use mapbox GL map and draw shapes using leaflet.

I have tried this code and want to add leaflet into this.

<template>
  <div id="mapContainer" class="basemap"></div>
</template>

<script>
import mapboxgl from "mapbox-gl";

export default {
  name: "BaseMap",
  data() {
    return {
      accessToken: MAPBOX_ACCESS_TOKEN,
    };
  },
  mounted() {
    mapboxgl.accessToken = this.accessToken;

    new mapboxgl.Map({
      container: "mapContainer",
      style: "mapbox://styles/mapbox/streets-v11",
      center: [103.811279, 1.345399],
      zoom: 12,
      maxBounds: [
        [103.6, 1.1704753],
        [104.1, 1.4754753],
      ],
    });
  },
};
</script>

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

<template>
  <div id="map"></div>
</template>

<script>
export default {
  name: 'Map',
  mounted() {
    // Initialize Leaflet map
    this.map = L.map('map').setView([YOUR_LATITUDE, YOUR_LONGITUDE], YOUR_ZOOM_LEVEL);

    // Add Mapbox GL layer to Leaflet map
    const mapboxAccessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    L.mapboxGL({
      accessToken: mapboxAccessToken,
      style: 'mapbox://styles/mapbox/streets-v11', // You can use your desired Mapbox style here
    }).addTo(this.map);
  },
};
</script>

<style>
#map {
  width: 100%;
  height: 500px;
}
</style>

<!-- end snippet -->

Suppose you have to used Leaflet with Mapbox GL in Vue.js Then used following step

Step 1: Install the Leaflet packages in your project

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

npm install mapbox-gl
npm i -D @vue-leaflet/vue-leaflet leaflet

<!-- end snippet -->
Step 2: Then Create the GoogleMap.vue commponet file

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

<script>
    import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
    import "mapbox-gl/dist/mapbox-gl.css";

    export default {
      components: {
        LMap,
        LTileLayer,
      },
      mounted() {
        this.initMap();
      },
      methods: {
        initMap() {
          const map = L.map(this.$refs.map).setView([YOUR_INITIAL_LATITUDE, YOUR_INITIAL_LONGITUDE], YOUR_INITIAL_ZOOM_LEVEL);

          L.tileLayer(
            "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
            {
              maxZoom: 12,
              tileSize: 300,
              zoomOffset: -1,
              accessToken: 'here token code',
            }
          ).addTo(map);
        },
      },
    };
    </script>

    <style>
    .map {
      height: 100%;
    }
    </style>

    <template>
      <div id="map">
        <div ref="map" class="map"></div>
      </div>
    </template>

<!-- end snippet -->

Step 3: Then Import the GoogleMap.vue component in Your main component

You can use following code to integrate Leaflet into MapboxGl.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

<template>
  <LMap id="map" :center="center" :zoom="zoom">
    <LTileLayer
      :options="layerOptions"
      :tile-layer-class="tileLayerClass" />
  </LMap>
</template>

<script>
import { LMap, LTileLayer } from 'vue2-leaflet'
import L from 'leaflet'
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl-leaflet'
import 'mapbox-gl/dist/mapbox-gl.css'
import 'leaflet/dist/leaflet.css'
window.mapboxgl = mapboxgl // mapbox-gl-leaflet expects this to be global
export default {
  components: {
    LMap,
    LTileLayer
  },
  data () {
    return {
      center: [39.9523893, -75.1636291],
      zoom: 14,
      tileLayerClass: (url, options) => L.mapboxGL(options),
      layerOptions: {
        accessToken: 'no-token',
        style: 'https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-styles/master/styles/bright-v9-cdn.json'
      }
    }
  }
}
</script>

<style>
#map {
  height: 500px;
}
</style>

<!-- end snippet -->