Using mapbox-gj-leaflet with Vue2Leaflet

App.vue

<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>

Thanks, I was looking for just that! Your Style Json doesn't load though, but people need to replace it with their own anyways. At least I can now use vector maps and tileserver-gl.