Plugin components

VueMapbox implements wrapper for core Mapbox Gl JS library API.
Any other functions, like Mapbox Gl JS plugins is out of scope. However, they can be implemented as plugin components.

Using plugin components

Using plugin components is easy. Just put component inside VMap components tree and pass necessary props to it. Below is example for using VueMapbox Geocoder.

<template>
  <VMap :accessToken="accessToken" :mapStyle="mapStyle">
    <MglGeocoderControl
      :accessToken="accessToken"
      :input.sync="defaultInput"
      @results="handleSearch"
    />
  </VMap>
</template>

<script>
import { VMap } from "v-mapbox";
import MglGeocoderControl from "v-mapbox-geocoder";

export default {
  name: "App",

  components: {
    VMap,
    MglGeocoderControl
  },
  data() {
    return {
      accessToken: "some_token",
      mapStyle: "some_style",
      defaultInput: "Bodhgaya"
    };
  },
  methods: {
    handleSearch(event) {
      console.log(event);
    }
  }
};
</script>

If you didn't find plugin your need, it's easy to implement plugin component yourself. VueMapbox solves map loading task and give some useful helpers. Check out development documentation.

Available plugin components

• VueMapbox Geocoder