Vue instantSearch Browse index

Hi,
In my laravel application I am using vue instantsearch.
One requirement is, on search page user should be able to export any search result to Excel/csv file.

Is it the “Browse Index” I should be using for this? Is there any vue example for this?
My issue is how do i get all the all result for the current state?
Can someone give direction please?

Vue template

<ais-instant-search
                :search-client="searchClient"
                :routing="routing"
                :index-name="index">

            <ais-configure :facetingAfterDistinct="true" :distinct="true" />
            <ais-search-box placeholder="Search here…" class="searchbox" v-model="searchQuery"/>
             <ais-hits >
                     <template slot="item" slot-scope="{ item }">
                              <h4 class="title"><ais-highlight :hit="item" attribute="name"/></h4>
                     </template>
               </ais-hits>

Vue data

    data: function () {
        return {
            searchQuery: '',
            searchClient: algoliasearch(
                process.env.MIX_ALGOLIA_APP_ID,
                process.env.MIX_ALGOLIA_SECRET
            ),
            routing: {
                router: historyRouter(),
                stateMapping: simpleMapping(),
            },

        }
    },

Hi @sabeywickrema, You can use the browseIndex for this, however, you should be able to get the json response from any search and convert those to a csv download file. I’m not aware of an examples in Vue for this. I did find this javascript conversion on stackoverflow.

Thanks @cindy.cullen

I actually used laravel php way to convert the json to Excel using a form to submit json to laravel controller.

 <form action="/search/export" method="post" class="float-right ml-2">
          <input type="hidden" name="_token" :value="csrf">
                    <ais-state-results>
                           <input type="hidden" name="results" :value="JSON.stringify({ hits })"
                                      slot-scope="{ state: { query }, results: { hits } }">
                    </ais-state-results>
         <button  type="submit"><i class="fas fa-file-download"></i> Export</button>
 </form>

But this send only the current number of hits per page. For example 20 hits. But I need to get all the search results for search query.

Can you point me a vue browseIndex example?

Hi @sabeywickrema, this may be best to use the php api client to use the browseIndex and then send the link to your frontend. We have JS version of the browseIndex, but to keep you API admin key secret, it’s best to run this from your backend. Here is the documentation for php and for JS