diff --git a/docs/maps/maps.mdx b/docs/maps/maps.mdx
index 161cbedd3..24c503b9d 100644
--- a/docs/maps/maps.mdx
+++ b/docs/maps/maps.mdx
@@ -74,6 +74,7 @@ Specify the HTML element where you want to render the map, by providing the elem
   values={[
     { label: 'HTML', value: 'html' },
     { label: 'React', value: 'react' },
+    { label: 'Vue', value: 'vue' },
   ]}
 >
   <TabItem value="html">
@@ -142,6 +143,53 @@ export default RadarMap;
 ```
 
  </TabItem>
+ <TabItem value="vue">
+
+ ```vue
+ <template>
+    <div id="map"></div>
+</template>
+
+<script>
+    import Radar from "radar-sdk-js";
+    import 'radar-sdk-js/dist/radar.css'
+
+    export default {  
+        mounted() {
+            Radar.initialize('prj_live_pk_...');
+
+            // create map
+            const map = Radar.ui.map({
+                container: 'map',
+                style: 'radar-default-v1',
+                center: [-73.9911, 40.7342], // NYC
+                zoom: 14,
+            });
+
+            // add a marker to the map
+            Radar.ui.marker({ text: 'Radar HQ' })
+            .setLngLat([-73.9910078, 40.7342465])
+            .addTo(map);
+        },
+    };
+</script>
+
+<style scoped>
+html,
+body,
+
+#map {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+</style>
+ ```
+
+ </TabItem>
+
 </Tabs>
 
 ## Configuration
@@ -428,6 +476,7 @@ In the example below, clicking the map will place a new marker, and refit the ma
   values={[
     { label: 'HTML', value: 'html' },
     { label: 'React', value: 'react' },
+    { label: 'Vue', value: 'vue' },
   ]}
 >
   <TabItem value="html">
@@ -526,6 +575,64 @@ class RadarMap extends React.Component {
 export default RadarMap;
 ```
 
+  </TabItem>
+  <TabItem value="vue">
+
+  ```vue
+  <template>
+    <div id="map"></div>
+</template>
+
+<script>
+import Radar from "radar-sdk-js";
+import 'radar-sdk-js/dist/radar.css'
+
+export default {  
+  mounted() {
+    Radar.initialize('prj_live_pk_...');
+
+    // create map
+    const map = Radar.ui.map({
+      container: "map",
+    });
+
+    // add marker on map click
+    map.on('click', (e) => {
+        const { lng, lat } = e.lngLat;
+
+        // create marker from click location
+        const marker = Radar.ui.marker()
+          .setLngLat([lng, lat])
+          .addTo(map);
+
+        // fit map to markers
+        map.fitToMarkers({ maxZoom: 14, padding: 80 });
+
+        // add listener to remove marker on click
+        marker.on('click', (e) => {
+          marker.remove();
+          map.fitToMarkers({ maxZoom: 14, padding: 80 }); // refit after marker removed
+        });
+    });
+  },
+};
+</script>
+
+<style scoped>
+html,
+body,
+
+#map {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 400px;
+}
+
+</style>
+  ```
+
   </TabItem>
 </Tabs>
 
@@ -541,6 +648,7 @@ Add a `Marker` with a custom image to the map by specifying the image URL.
   values={[
     { label: 'HTML', value: 'html' },
     { label: 'React', value: 'react' },
+    { label: 'Vue', value: 'vue' }, 
   ]}
 >
   <TabItem value="html">
@@ -633,6 +741,61 @@ class RadarMap extends React.Component {
 export default RadarMap;
 ```
 
+  </TabItem>
+  <TabItem value="vue">
+
+  ``` vue
+  <template>
+    <div id="map"></div>
+</template>
+
+<script>
+import Radar from "radar-sdk-js";
+import 'radar-sdk-js/dist/radar.css'
+
+export default {  
+  mounted() {
+    Radar.initialize('prj_live_pk_...');
+
+    // create map
+    const map = Radar.ui.map({
+      container: "map",
+    });
+
+   map.on('load', () => {
+      const { lng, lat } = map.getCenter();
+
+      // add marker to map at map center
+      Radar.ui.marker({
+        url: 'https://radar.com/static/image/logo.png',
+        width: '48px',
+        height: '48px',
+        popup: {
+          text: 'Radar HQ',
+        },
+      })
+      .setLngLat([lng, lat])
+      .addTo(map);
+    });
+  },
+};
+</script>
+
+<style scoped>
+html,
+body,
+
+#map {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 400px;
+}
+
+</style>
+  ```
+
   </TabItem>
 </Tabs>
 
@@ -648,6 +811,7 @@ Display a popup with customized HTML.
   values={[
     { label: 'HTML', value: 'html' },
     { label: 'React', value: 'react' },
+    { label: 'Vue', value: 'vue' }, 
   ]}
 >
   <TabItem value="html">
@@ -782,6 +946,82 @@ class RadarMap extends React.Component {
 export default RadarMap;
 ```
 
+  </TabItem>
+  <TabItem value="vue">
+
+  ```vue
+  <template>
+    <div id="map"></div>
+
+    <div id="custom-popup" style="visibility: hidden; text-align: center;">
+      <h3>Union Square</h3>
+      <img width="100" src="https://images.ctfassets.net/f2vbu16fzuly/7BUSW7MAtT2abUQY8U3Ri6/11fb8b92fd24c326bfd5da3064d67666/union_square.jpg?w=600" />
+    </div>
+</template>
+
+<script>
+import Radar from "radar-sdk-js";
+import 'radar-sdk-js/dist/radar.css'
+
+export default {  
+  mounted() {
+    Radar.initialize('prj_live_pk_...');
+
+    // create map
+    const map = Radar.ui.map({
+      container: "map",
+      center: [-73.990550, 40.735225],
+      zoom: 16,
+    });
+
+    map.on('load', () => {
+
+      // Create a marker with a custom popup using HTML
+      Radar.ui.marker({
+        popup: {
+          html: `
+            <div style="text-align: center;">
+              <h3>The Roosevelt Building</h3>
+              <img width="100" src="https://images.ctfassets.net/f2vbu16fzuly/5VZ6BEW5Ju6kL4OeooR2YG/4e694ad24b8d57c6b9958de79976d89e/Screenshot_2024-07-15_at_9.43.45_AM.png?w=400" />
+            </div>
+          `,
+        },
+      })
+      .setLngLat([-73.9910078, 40.7342465])
+      .addTo(map);
+
+      // Create a marker with a custom popup using a DOM element
+      const element = document.getElementById('custom-popup').cloneNode(true /* deep */);
+      element.style.visibility = 'visible';
+      element.id = 'custom-popup-1';
+
+      Radar.ui.marker({
+        popup: {
+          element,
+        },
+      })
+      .setLngLat([-73.990389, 40.735862])
+      .addTo(map);
+    });
+  },
+};
+</script>
+
+<style scoped>
+html,
+body,
+
+#map {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 400px;
+}
+
+</style>
+  ```
+
   </TabItem>
 </Tabs>
 
@@ -801,6 +1041,7 @@ Lines can be styled according to the MapLibre [Line Layer properties](https://ma
   values={[
     { label: 'HTML', value: 'html' },
     { label: 'React', value: 'react' },
+    { label: 'Vue', value: 'vue' },
   ]}
 >
   <TabItem value="html">
@@ -949,6 +1190,90 @@ class RadarMap extends React.Component {
 export default RadarMap;
 ```
 
+ </TabItem>
+ <TabItem value="vue">
+
+ ```vue
+ <template>
+    <div id="map"></div>
+</template>
+
+<script>
+import Radar from "radar-sdk-js";
+import 'radar-sdk-js/dist/radar.css'
+
+export default {  
+  mounted() {
+    Radar.initialize('prj_live_pk_...');
+
+    // create map
+    const map = Radar.ui.map({
+      container: "map",
+    });
+
+    map.on('load', () => {
+
+        // create new feature from polyline
+        const polyline = 'iyeulAveaclCuVfw@aA|CuAlEgj@teBm@jBs@|BbBjA~XzRdFnDfBlA`A{C`@mA~h@icBfAmD`A{Cff@c|A|A{E|BZfJrAh[lEhC^dBThMdBnTtCd@LzBx@|BjA^RhZnUzBdB`BtAl\\zWvAjAlBzA|UjRfEhD`ClBhRfOlCxBjBxAhBxAxKzItNhL|BhBnB|Af]rXnB~A|AnAn[fWbAv@~ArAzBfBxStPbInGtB`BlBzA~b@l]bAx@d@\\jBxAjMdKTPxGlFnJvH|StPnCxBhFbEr@{EfEeYvCyRf@kD\\{BBUtC}RfAoFbAcFpDsNl@_Cl@aCfLcd@r@sCn@cC`Lsc@p@kCl@aCjE}P`E}Od@iBz@{DrD`A|JxCxWdFxc@fLzIzBzL~C~Bj@dAXlg@rM~Ab@pA^|`@pLp@RtBl@bBf@xEpAjQ`FtBl@xF~AjEjAtIbCxGMzWjIhCv@jBl@ju@pUnCz@pCdAvRnIfUpJlV~KtBbAlB~@l`@|SvBhAXNjCvApLnGxBlAnFtCnGeEbZyQ~G}E`B}AhBsBfByBnFkH|AiBzAeBzAcB|A{AdB}ApBwAhCyAfCkApVwKbh\\qjOjBKhBWdCu@zDgBvAi@xAi@dBc@`BQpAGrAFvAVtAp@lAz@lAvA~@hBj@|BXdCFtBIhCWtBe@`By@|AeArAm@`@e@Rs@PyANoB@yAL}AT_BXyBQ}IW_Um@aQUqAHcBTyBf@_Dt@{Ad@uAj@}CrAuR|IoCnA\\gUBiBmCBoDGaIOkL[yNWeB@gBBcC?ao@iBwBEyBGkYs@}HQoAEeBEua@aAyAEyGQ';
+        const polylineFeature = map.addPolyline(polyline, {
+          id: 'polyline',
+          precision: 6,
+          properties: {
+            name: 'Polyline Feature',
+          },
+          paint: {
+            'line-color': 'red',
+          },
+        });
+
+        // create new feature from GeoJSON LineString
+        const lineString = {
+          type: 'Feature',
+          id: 'line-string',
+          properties: {
+            name: 'LineString Feature',
+          },
+          geometry: {
+            type: 'LineString',
+            coordinates: [[-73.953506,40.721755],[-73.951791,40.723347],[-73.951716,40.723417],[-73.951643,40.723488],[-73.951603,40.723411],[-73.950675,40.721777],[-73.950651,40.721704],[-73.95074,40.721652],[-73.952666,40.720491],[-73.952775,40.720422],[-73.952855,40.720376],[-73.953253,40.720001],[-73.953414,40.719851],[-73.953469,40.719798],[-73.953515,40.719755],[-73.954007,40.719296],[-73.954061,40.719246],[-73.954116,40.719195],[-73.954598,40.718747],[-73.954655,40.718694],[-73.954708,40.718645],[-73.955193,40.718194],[-73.955251,40.71814],[-73.955301,40.718094],[-73.955461,40.717945],[-73.955788,40.717641],[-73.955844,40.717589],[-73.955895,40.717541],[-73.956384,40.717083],[-73.956439,40.717032],[-73.956489,40.716986],[-73.956978,40.716532],[-73.957031,40.716483],[-73.957081,40.716436],[-73.957573,40.715977],[-73.957626,40.715927],[-73.957679,40.715878],[-73.958176,40.715433],[-73.958241,40.715374],[-73.958285,40.715332],[-73.958466,40.715155],[-73.958728,40.7149],[-73.958802,40.714833],[-73.958882,40.714764],[-73.959293,40.714395],[-73.959493,40.714211],[-73.959743,40.713963],[-73.959808,40.713891],[-73.959863,40.71383],[-73.960131,40.713397],[-73.960163,40.713345],[-73.960192,40.713299],[-73.960282,40.713157],[-73.96052,40.712779],[-73.960561,40.712714],[-73.960597,40.712658],[-73.96099,40.712031],[-73.961029,40.711969],[-73.961062,40.711916],[-73.96138,40.711414],[-73.961414,40.71136],[-73.961452,40.7113],[-73.961758,40.71082],[-73.961792,40.710767],[-73.961821,40.710718],[-73.961824,40.710714],[-73.961765,40.710703],[-73.961111,40.710502],[-73.961079,40.710494],[-73.961061,40.710491],[-73.961039,40.710488],[-73.96102,40.710486],[-73.961,40.710487],[-73.960989,40.710488],[-73.960978,40.710488],[-73.960968,40.710486],[-73.960961,40.71048],[-73.960937,40.710466],[-73.96094,40.710453],[-73.960946,40.710441],[-73.960954,40.710431],[-73.960964,40.710423],[-73.960975,40.710419],[-73.960988,40.710418],[-73.961001,40.71042],[-73.96106,40.710434],[-73.961115,40.71045],[-73.961611,40.710603],[-73.963514,40.711182],[-73.96506,40.711654],[-73.966925,40.712193],[-73.967125,40.712135],[-73.967169,40.712149],[-73.972137,40.713651],[-73.976941,40.715098],[-73.978385,40.715543],[-73.978471,40.7155],[-73.984214,40.71723],[-73.985504,40.717633],[-73.985582,40.717658],[-73.985774,40.717726],[-73.985792,40.717685],[-73.985824,40.717616],[-73.985842,40.717574],[-73.985868,40.717522],[-73.985894,40.717468],[-73.986194,40.716898],[-73.986627,40.716045],[-73.986633,40.716038],[-73.986666,40.716002],[-73.986694,40.715975],[-73.986731,40.715929],[-73.986782,40.715857],[-73.986829,40.715771],[-73.986932,40.71557],[-73.987005,40.715414],[-73.987074,40.715241],[-73.987085,40.715188],[-73.987103,40.715105],[-73.987125,40.715017],[-73.987148,40.714837],[-73.987165,40.714622],[-73.987167,40.714467],[-73.987168,40.714397],[-73.98717,40.714317],[-73.987169,40.714234],[-73.987167,40.714169],[-73.987154,40.714088],[-73.987093,40.713709],[-73.987081,40.713634],[-73.987071,40.713574],[-73.986981,40.712999],[-73.986967,40.712909],[-73.986952,40.712813],[-73.986942,40.71275],[-73.986878,40.712347],[-73.986858,40.712217],[-73.98684,40.712107],[-73.986765,40.71163],[-73.98675,40.711533],[-73.986737,40.71145],[-73.986673,40.711044],[-73.986666,40.710997],[-73.986618,40.710698],[-73.986627,40.710656],[-73.98664,40.710618],[-73.986655,40.710585],[-73.986658,40.710579],[-73.986666,40.710565],[-73.986674,40.710549],[-73.986708,40.710482],[-73.986733,40.710435],[-73.986746,40.710409],[-73.986804,40.710402],[-73.987234,40.710354],[-73.987287,40.710349],[-73.987561,40.710319],[-73.987612,40.710313],[-73.987813,40.710291],[-73.988185,40.710248],[-73.988264,40.710239],[-73.988354,40.710228],[-73.988706,40.710188],[-73.989152,40.710138],[-73.989714,40.710071],[-73.989831,40.710054],[-73.990709,40.709927],[-73.991667,40.709783],[-73.991848,40.709756],[-73.992033,40.70973],[-73.992299,40.709691],[-73.99364,40.70949],[-73.993857,40.709467],[-73.99388,40.709464],[-73.994156,40.709431],[-73.994406,40.709398],[-73.995021,40.709314],[-73.99588,40.709189],[-73.995992,40.709138],[-73.996245,40.709099],[-73.996487,40.709064],[-73.996754,40.709027],[-73.997374,40.708951],[-73.997825,40.708859],[-73.998223,40.708741],[-73.998523,40.70864],[-73.998925,40.708485],[-73.999061,40.708409],[-73.999288,40.708282],[-73.999604,40.708037],[-73.999725,40.707965],[-73.999766,40.707942],[-73.999888,40.707874],[-73.999994,40.707817],[-74.000044,40.707791],[-74.000102,40.707762],[-74.000136,40.707745],[-74.000832,40.707382],[-74.000891,40.707352],[-74.001298,40.70714],[-74.001326,40.707125],[-74.002165,40.706675],[-74.002182,40.706665],[-74.002212,40.706648],[-74.00224,40.706632],[-74.002268,40.706615],[-74.002311,40.706591],[-74.002553,40.706451],[-74.002939,40.706223],[-74.002983,40.706197],[-74.003016,40.706177],[-74.00305,40.706157],[-74.003105,40.706125],[-74.00312,40.706116],[-74.003395,40.705944],[-74.003459,40.705908],[-74.003521,40.705878],[-74.003601,40.705854],[-74.003691,40.705823],[-74.003755,40.705791],[-74.003873,40.705717],[-74.004418,40.705367],[-74.004599,40.70525],[-74.004773,40.705138],[-74.006118,40.704274],[-74.006291,40.704161],[-74.006921,40.703763],[-74.006938,40.703752],[-74.00719,40.703598],[-74.007215,40.703583],[-74.007244,40.703565],[-74.007408,40.703468],[-74.00747,40.703431],[-74.007499,40.703414],[-74.007529,40.703396],[-74.007624,40.70334],[-74.007653,40.703313],[-74.007665,40.703294],[-74.007679,40.70326],[-74.007686,40.703232],[-74.007698,40.703159],[-74.007702,40.70314],[-74.007717,40.703076],[-74.007722,40.703042],[-74.007725,40.703025],[-74.007733,40.702983],[-74.007751,40.702948],[-74.007771,40.70292],[-74.007794,40.702898],[-74.007825,40.702878],[-74.008149,40.702681],[-74.009182,40.70206],[-74.009223,40.702037],[-74.009259,40.702021],[-74.009297,40.702005],[-74.009393,40.70197],[-74.009569,40.701907],[-74.009599,40.701898],[-74.009648,40.701887],[-74.009716,40.701874],[-74.00976,40.701863],[-74.010014,40.701792],[-74.010073,40.701776],[-74.010233,40.701727],[-74.010275,40.701716],[-74.010482,40.701664],[-74.011082,40.701527],[-74.011111,40.701519],[-74.011172,40.7015],[-74.011211,40.70149],[-74.011472,40.701429],[-74.011638,40.70139],[-74.011826,40.701346],[-74.012132,40.701275],[-74.012268,40.701246],[-74.012284,40.701242],[-74.012302,40.701239],[-74.012318,40.701238],[-74.012338,40.701241],[-74.012352,40.70125],[-74.01236,40.70126],[-74.012377,40.7013],[-74.012394,40.701341],[-74.012401,40.701359],[-74.012407,40.701372],[-74.012413,40.701383],[-74.01242,40.701393],[-74.012428,40.701403],[-74.012437,40.701411],[-74.012446,40.701417],[-74.012456,40.701422],[-74.012466,40.701426],[-74.01248,40.70143],[-74.012499,40.701432],[-74.012545,40.701439],[-74.012562,40.701444],[-74.012578,40.70145],[-74.012594,40.701457],[-74.012609,40.701465],[-74.012622,40.701473],[-74.012633,40.701483],[-74.012647,40.701498],[-74.012657,40.701518],[-74.012668,40.701543],[-74.012682,40.701578],[-74.01271,40.701658],[-74.012722,40.701684],[-74.012739,40.701702],[-74.012772,40.701725],[-74.0128,40.701755],[-74.012819,40.70179],[-74.012885,40.702055],[-74.012906,40.702153],[-74.012919,40.702189],[-74.012926,40.702207],[-74.012937,40.702225],[-74.012951,40.702242],[-74.012969,40.702256],[-74.012989,40.702267],[-74.013021,40.702277],[-74.013051,40.70228],[-74.013593,40.702258],[-74.013676,40.70225],[-74.013745,40.702243],[-74.013804,40.702239],[-74.013877,40.702234],[-74.013899,40.702235],[-74.013922,40.702238],[-74.013941,40.702245],[-74.013959,40.702252],[-74.013975,40.702261],[-74.01399,40.702272],[-74.014011,40.70229],[-74.014045,40.702331],[-74.014078,40.702361],[-74.01412,40.70239],[-74.014171,40.702422],[-74.014233,40.702453],[-74.014262,40.702466],[-74.014306,40.702487],[-74.014365,40.702518],[-74.014424,40.702552],[-74.014488,40.702598],[-74.014546,40.702644],[-74.014604,40.702699],[-74.014649,40.702744],[-74.014682,40.702783],[-74.014704,40.702816],[-74.014723,40.70285],[-74.014737,40.702882],[-74.014751,40.702924],[-74.014762,40.70297],[-74.01477,40.703027],[-74.014776,40.703089],[-74.014778,40.703141],[-74.01477,40.703192],[-74.014762,40.703238],[-74.014754,40.703271],[-74.014744,40.703313],[-74.014733,40.703353],[-74.014717,40.703411],[-74.014699,40.703466],[-74.014682,40.703512],[-74.014668,40.703556],[-74.014659,40.70359],[-74.014653,40.703623],[-74.014652,40.703654],[-74.014651,40.703682],[-74.014655,40.703707],[-74.014661,40.703731],[-74.014675,40.703762],[-74.014686,40.70379],[-74.014694,40.703813],[-74.014698,40.703835],[-74.014698,40.703863],[-74.014691,40.703892],[-74.014686,40.703917],[-74.014675,40.703947],[-74.014659,40.703979],[-74.014652,40.704008],[-74.014651,40.704028],[-74.014663,40.704105],[-74.014673,40.704136],[-74.014688,40.704183],[-74.014712,40.704245],[-74.014736,40.704289],[-74.014765,40.704335],[-74.014794,40.70437],[-74.014839,40.704409],[-74.014889,40.704443],[-74.014937,40.70447],[-74.014984,40.704494],[-74.015046,40.704524],[-74.015141,40.704558],[-74.015196,40.704572],[-74.015262,40.704586],[-74.01532,40.704596],[-74.015384,40.704602],[-74.015463,40.704606],[-74.015543,40.704607],[-74.015616,40.70461],[-74.015665,40.704613],[-74.015751,40.704629],[-74.015836,40.70464],[-74.015892,40.704646],[-74.015934,40.704648],[-74.015974,40.704646],[-74.016019,40.704641],[-74.016087,40.704627],[-74.016148,40.704617],[-74.016196,40.704612],[-74.016245,40.70461],[-74.016288,40.704612],[-74.016326,40.704616],[-74.016364,40.704624],[-74.016403,40.70463],[-74.016449,40.704633],[-74.016502,40.704634],[-74.016577,40.704633],[-74.01678,40.704629],[-74.016812,40.70463],[-74.016848,40.704631],[-74.017007,40.704641],[-74.017029,40.704647],[-74.01705,40.704655],[-74.017068,40.704668],[-74.017081,40.704684],[-74.017087,40.704699],[-74.017086,40.704715],[-74.017079,40.704737],[-74.01706,40.704785],[-74.017036,40.704843],[-74.017013,40.7049],[-74.017,40.704954],[-74.016995,40.704975],[-74.016989,40.704993],[-74.016907,40.705196],[-74.016741,40.705627],[-74.016725,40.705667],[-74.016658,40.705837],[-74.016614,40.705947],[-74.016467,40.70633],[-74.016463,40.706345],[-74.016459,40.706359],[-74.016427,40.706488],[-74.01642,40.706517],[-74.016407,40.706569],[-74.016389,40.706632],[-74.016372,40.70668],[-74.01636,40.706716],[-74.016257,40.706988],[-74.016224,40.70706],[-74.016177,40.707146],[-74.016104,40.707272],[-74.016071,40.707341],[-74.015976,40.707593],[-74.015944,40.707674],[-74.015941,40.707682],[-74.015933,40.707704],[-74.015922,40.70773],[-74.01592,40.707734],[-74.015897,40.707797],[-74.015873,40.707859],[-74.015865,40.70788],[-74.015861,40.70789],[-74.01584,40.707947],[-74.015436,40.709038],[-74.015357,40.709272],[-74.015322,40.709406],[-74.015258,40.709668],[-74.015242,40.709731],[-74.015238,40.709752],[-74.015229,40.709787],[-74.015209,40.709839],[-74.015281,40.709849],[-74.015342,40.70986],[-74.015803,40.709961],[-74.015821,40.709965],[-74.016244,40.710061],[-74.016374,40.71009],[-74.016512,40.710121],[-74.016953,40.71022],[-74.017489,40.710341],[-74.017525,40.71035],[-74.017538,40.710355],[-74.017561,40.710364],[-74.017544,40.710384],[-74.017537,40.710406],[-74.017541,40.710429],[-74.017554,40.71045],[-74.017576,40.710466],[-74.017604,40.710475],[-74.017634,40.710476],[-74.017663,40.71047],[-74.017687,40.710457],[-74.017704,40.710439],[-74.017706,40.710434]],
+          },
+        };
+        const lineStringFeature = map.addLine(lineString);
+
+        // create popup when clicking on line
+        [polylineFeature, lineStringFeature].forEach((radarFeature) => {
+          radarFeature.on('click', ({ feature, originalEvent: event }) => {
+            Radar.ui.popup({
+              text: feature.properties.name, // popup text from feature.properties
+            })
+            .setLngLat([event.lngLat.lng, event.lngLat.lat])
+            .addTo(map);
+          });
+        });
+
+        // fit the map bounds to the features
+        map.fitToFeatures({ padding: 40 });
+      });
+  },
+};
+</script>
+
+<style scoped>
+html,
+body,
+
+#map {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 400px;
+}
+
+
+</style>
+ ```
+
  </TabItem>
 </Tabs>
 
@@ -966,6 +1291,7 @@ Polygon features can be styled according to the polygon options highlighted abov
   values={[
     { label: 'HTML', value: 'html' },
     { label: 'React', value: 'react' },
+    { label: 'Vue', value: 'vue' },
   ]}
 >
   <TabItem value="html">
@@ -1084,6 +1410,75 @@ class RadarMap extends React.Component {
 export default RadarMap;
 ```
 
+ </TabItem>
+ <TabItem value="vue">
+
+ ```vue
+ <template>
+    <div id="map"></div>
+</template>
+
+<script>
+import Radar from "radar-sdk-js";
+import 'radar-sdk-js/dist/radar.css'
+
+export default {  
+  mounted() {
+    Radar.initialize('prj_live_pk_...');
+
+    // create map
+    const map = Radar.ui.map({
+      container: "map",
+    });
+
+    map.on('load', () => {
+
+        // create new feature from GeoJSON Feature
+        const geojson = {
+          type: 'Feature',
+          id: 1,
+          properties: {
+            name: 'Central Park',
+          },
+          geometry: {
+            type: 'Polygon',
+            coordinates: [[[-73.95820498349376,40.80026256420331],[-73.9816545434309,40.76824212209061],[-73.97283590550576,40.764244806438285],[-73.94918592197929,40.79677293396304],[-73.95820498349376,40.80026256420331]]]
+          },
+        };
+
+        const feature = map.addPolygon(geojson)
+
+        feature.on('click', ({ feature, originalEvent: event }) => {
+          Radar.ui.popup({
+            text: feature.properties.name,
+          })
+          .setLngLat([event.lngLat.lng, event.lngLat.lat])
+          .addTo(map);
+        });
+
+        // fit the map bounds to the features
+        map.fitToFeatures({ padding: 40 });
+      });
+  },
+};
+</script>
+
+<style scoped>
+html,
+body,
+
+#map {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 400px;
+}
+
+
+</style>
+ ```
+ 
  </TabItem>
 </Tabs>