How to use Vue components with Mapbox IControl

Question

I want to use Vue in MapBox Controls instead of playing with good old DOM APIs.

Answer 1

<template>
  <span :id="id" class="mapboxgl-ctrl mapboxgl-ctrl-group">
    <button type="button">
      <FitFeaturesIcon class="mapboxgl-ctrl-icon" aria-hidden="true" />
    </button>
  </span>
</template>

<script>
import FitFeaturesIcon from './FitFeaturesIcon'

const id = 'FitFeaturesControl'

export default {
  components: { FitFeaturesIcon },
  data: () => ({
    id
  })
}

export class CFitFeaturesControl {
  onAdd(map) {
    this._map = map
    this._container = document.getElementById(id)
    return this._container
  }
}
</script>