7. Rendering non-HTML - Vue JS Optimisation

map.js

const map = new mapboxgl.Map(/* ... */);

map.on('load', () => {
  // Data
  map.addSource(/* ... */);
  
  // Layers
  map.addLayer(/* ... */);
  map.addLayer(/* ... */);
  
  // Hover Effects
  map.on('mousemove', /* ... */);
  map.on('mouseleave', /* ... */);
});

mapbox.html

<MapboxMap>
  <MapboxMapMarkers :items="cities" primary>
    <template slot-scope="city">
      <h3>{{ city.name }}</h3>
    </template>
  </MapboxMapMarkers>

  </MapboxNavigation/>
</MapboxMap>

<script>
  // Abstract component
  ...
  created () {
    const { map } = this.$parent;
    
    map.on('load', () => {
      map.addSource(/* ... */);
      map.addLayer(/* ... */);
    });
  },
  beforeDestroy () {
    const { map } = this.$parent;
    map.on('load', () => {
      map.removeSource(/* ... */);
      map.removeLayer(/* ... */);
    });
  },
  render(h) {
    // returns nothing
    return null;
  }
  ...
</script>