title: How to integrate leaflet-search plugin to my vue2-leaflet project?
body: <p>I’m new to Vue and I’m developing a map application with vue2-leaflet. I would like to add a search box to my application to locate markers on my map, I found this leaflet plugin <a href="https://github.com/stefanocudini/leaflet-search" rel="nofollow noreferrer">leaflet-search</a> which is just the functionality I’m looking for, but I don’t know how to integrate it into my vue cli project.</p>
  <p>After installing the plugin, how do I import it into my vue component? and, where in my <code>&lt;script&gt;</code> should I add the code?</p>
  <p>This is what the component where I want to add the search box looks like:</p>
  <pre><code>&lt;template&gt;
  &lt;body&gt;
    &lt;l-map class=&quot;map&quot; ref=&quot;map&quot; :min-zoom=&quot;minZoom&quot; :crs=&quot;crs&quot;&gt;
      &lt;l-tile-layer :url=&quot;url&quot;&gt;&lt;/l-tile-layer&gt;
      &lt;l-grid-layer class=&quot;grid&quot; :tile-component=&quot;tileComponent&quot;&gt;&lt;/l-grid-layer&gt;
      &lt;l-marker v-for=&quot;(newCoords, i) in InvertedCoords&quot; :key=&quot;i&quot; :lat-lng=&quot;newCoords&quot;&gt;
        &lt;div v-if=&quot;stars[i].status === 'ALLY'&quot;&gt;
          &lt;l-icon &gt;&lt;/l-icon&gt;
        &lt;/div&gt;
        &lt;div v-else&gt;
          &lt;l-icon&gt;&lt;/l-icon&gt;
        &lt;/div&gt;
        &lt;l-popup class=&quot;popup&quot;&gt;
          &lt;em class=&quot;popup-bold&quot;&gt;Name: &lt;/em&gt;{{ stars[i].name }}&lt;br /&gt;
          &lt;em class=&quot;popup-bold&quot;&gt;Longitud: &lt;/em&gt;{{ stars[i].lng }}&lt;br /&gt;
          &lt;em class=&quot;popup-bold&quot;&gt;Latitud: &lt;/em&gt;{{ stars[i].lat }}&lt;br /&gt;
        &lt;/l-popup&gt;
      &lt;/l-marker&gt;
    &lt;/l-map&gt;
  &lt;/body&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import L from &quot;leaflet&quot;;
  import { CRS } from &quot;leaflet&quot;;
  import GridTemplate from './GridTemplate.vue';
  import { eventBus } from '../main.js'
  import {
    LMap,
    LTileLayer,
    LMarker,
    LPopup,
    LPolyline,
    LIcon,
  } from &quot;vue2-leaflet&quot;;
  
  export default {
    name: &quot;Map&quot;,
    components: {
      LMap,
      LTileLayer,
      LMarker,
      LImageOverlay,
      LPopup,
      LIcon,
    },
    props: {
      msg: {
        type: String
      }
    },
    data() {
      return {
        url:  &quot;&quot;,
        bounds: [  [-2600, -2700],  [1000, 3000] ],
        minZoom: 0,
        crs: L.CRS.Simple,
        stars: [],
        messageList: [],
        tileComponent: GridTemplate
      };
    },
    computed: {
      InvertedCoords() {
        var newArraw = [];
        for (let i = 0; i &lt; this.stars.length; i++) {
          newArraw[i] = {
            id: i + 2,
            lat: this.stars[i].lat * -1,
            lng: this.stars[i].lng * -1
          };
        }
        return newArraw;
        console.log(newArraw);
      }
    },
  
    watch: {
      msg: function() {
        this.messageList.push(this.msg);
      }
    },
  
    mounted() {
      this.$refs.map.mapObject.setView([552, 40], 1);
  
      this.$http.get(&quot;url&quot;)
          .then(response =&gt; {
            return response.json();
          })
        .then(data =&gt; {
          const resultArray = [];
          for (let key in data) {
            resultArray.push(data[key]);
          }
          this.stars = resultArray;
        });
  
    methods: {
      inverted() {
        for (let i = 0; i &lt; this.newArraw.length; i++) {
          console.log(this.newArraw[i]);
          return this.newArraw[i];
        }
      },
      updateStars(text) {
        this.$http.get(&quot;url&quot;)
          .then(response =&gt; {
            return response.json();
          })
        .then(data =&gt; {
          const resultArray = [];
          for (let key in data) {
            resultArray.push(data[key]);
          }
          this.stars = resultArray;
        });
      },
      StarsData() {
        eventBus.$emit('i-got-clicked', this.stars)
      },
      
    }
  };
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  
  &lt;/style&gt;
  
  </code></pre>