diff --git a/docs/guide/composition.md b/docs/guide/composition.md
index 39655842..eb3eceaf 100644
--- a/docs/guide/composition.md
+++ b/docs/guide/composition.md
@@ -11,20 +11,20 @@ For example, adding map controls:
     :accessToken="accessToken"
     :mapStyle.sync="mapStyle"
   >
-    <MglNavigationControl position="top-right"/>
-    <MglGeolocateControl position="top-right" />
+    <VControlNavigation position="top-right"/>
+    <VControlGeolocate position="top-right" />
   </mgl-map>
 </div>
 </template>
 
 <script>
-import { VMap, MglNavigationControl, MglGeolocateControl } from "v-mapbox";
+import { VMap, VControlNavigation, VControlGeolocate } from "v-mapbox";
 
 export default {
   components: {
     VMap,
-    MglNavigationControl,
-    MglGeolocateControl
+    VControlNavigation,
+    VControlGeolocate
   },
   data() {
     return {
@@ -42,8 +42,8 @@ Adding a popup:
 <template>
   <div id="#app">
     <VMap :accessToken="accessToken" :mapStyle.sync="mapStyle">
-      <MglNavigationControl position="top-right" />
-      <MglGeolocateControl position="top-right" />
+      <VControlNavigation position="top-right" />
+      <VControlGeolocate position="top-right" />
       <VPopup :coordinates="popupCoordinates">
         <span>Hello world!</span>
       </VPopup>
@@ -54,16 +54,16 @@ Adding a popup:
 <script>
 import {
   VMap,
-  MglNavigationControl,
-  MglGeolocateControl,
+  VControlNavigation,
+  VControlGeolocate,
   VPopup
 } from "v-mapbox";
 
 export default {
   components: {
     VMap,
-    MglNavigationControl,
-    MglGeolocateControl,
+    VControlNavigation,
+    VControlGeolocate,
     VPopup
   },
   data() {
diff --git a/docs/guide/controls.md b/docs/guide/controls.md
index 564ff7b2..ef71be63 100644
--- a/docs/guide/controls.md
+++ b/docs/guide/controls.md
@@ -16,12 +16,11 @@ _All controls_:
       :mapStyle.sync="mapStyle"
       :attributionControl="false"
     >
-      <MglAttributionControl />
-      <MglNavigationControl position="top-right" />
-      <MglGeolocateControl position="top-right" />
-      <MglNavigationControl position="top-right" />
-      <MglGeolocateControl position="top-right" />
-      <MglScaleControl />
+      <VControlAttribution />
+      <VControlNavigation position="top-right" />
+      <VControlGeolocate position="top-right" />
+      <VControlFullscreen position="top-right" />
+      <VControlScale />
     </VMap>
   </div>
 </template>
@@ -29,18 +28,21 @@ _All controls_:
 <script>
 import {
   VMap,
-  MglAttributionControl,
-  MglNavigationControl,
-  MglGeolocateControl,
-  MglFullscreenControl,
-  MglScaleControl
+  VControlAttribution,
+  VControlNavigation,
+  VControlGeolocate,
+  VControlFullscreen,
+  VControlScale
 } from "v-mapbox";
 
 export default {
   components: {
     VMap,
-    MglNavigationControl,
-    MglGeolocateControl
+    VControlAttribution,
+    VControlNavigation,
+    VControlGeolocate,
+    VControlFullscreen,
+    VControlScale
   },
   data() {
     return {
diff --git a/docs/guide/layers-and-sources.md b/docs/guide/layers-and-sources.md
index 3c60a32c..853d34f5 100644
--- a/docs/guide/layers-and-sources.md
+++ b/docs/guide/layers-and-sources.md
@@ -14,7 +14,7 @@ For example adding a layer with GeoJSON data:
 <template>
   <VMap :accessToken="accessToken" :mapStyle.sync="mapStyle">
     <!-- Adding navigation control -->
-    <MglNavigationControl position="top-right" />
+    <VControlNavigation position="top-right" />
     <!-- Adding GeoJSON layer -->
     <VLayerMapboxGeojson
       :sourceId="geoJsonSource.id"
@@ -26,12 +26,12 @@ For example adding a layer with GeoJSON data:
 </template>
 
 <script>
-import { VMap, MglNavigationControl, VLayerMapboxGeojson } from "v-mapbox";
+import { VMap, VControlNavigation, VLayerMapboxGeojson } from "v-mapbox";
 
 export default {
   components: {
     VMap,
-    MglNavigationControl,
+    VControlNavigation,
     VLayerMapboxGeojson
   },
   data() {