# Plugin components

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

# Using plugin components

Using plugin components is easy. Just put component inside MglMap components tree and pass necessary props to it. Below is example for using VueMapbox Geocoder (opens new window).

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

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

export default {
  name: "App",

  components: {
    MglMap,
    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 documantation.

# Available plugin components