Vue Geo Search with Bounds

Hello everyone! I’ve been struggling with the geo capabilities with Algolia + Vue for a while now. Here’s a simplified version of my setup.


<ais-instant-search index-name="location" :search-client="searchClient">
    <ais-configure :filters="approval boolean" :insideBoundingBox.camel="[bounds]" />
    <MapComponent @boundsChanged="updateAlgoliaBounds" />

Method: updateAlgoliaBounds(coords) {
    bounds = [ lat1, lng1, lat2, lng2 ]

Then in the Map component I have something like:

    <Map that displays markers @bounds-changed=$emit('boundsChanged', coords) />
    import { createWidgetMixin } from 'vue-instantsearch';
    import { connectGeoSearch } from 'instantsearch.js/es/connectors';
    mixins: geoSearchMixin

Everything was working until I wanted to only display hits that were on the current view. I also have a listing of hits below the map. This results in an endless loop of outputting the bounds and updating search.

Is there anyway to get this to work or would anyone be able to point me in the direction of how to integrate instantsearch.js myself into vue?

Thank you for reading and for any advice you’re able to give!