#community-help

Troubleshooting vue-instantsearch Implementation with Vue Storefront

TLDR Mehul asked for help with a vue-instantsearch issue on Vue Storefront. Jason suggested transpiling vue-instantsearch in the Vue Storefront build process to fix the problem.

Powered by Struct AI
Feb 04, 2022 (23 months ago)
Mehul
Photo of md5-375f12d6cdbb3bc6accdbd819d657bf3
Mehul
11:41 AM
Hi, I am trying to implement vue-instantsearch for typesense at vue storefront. But getting below error. Please help me to implement this feature with Vue Storefront.
Kishore Nallan
Photo of md5-4e872368b2b2668460205b409e95c2ea
Kishore Nallan
12:27 PM
Hi Mehul, can you please post the code snippet that triggers this error?
Feb 09, 2022 (23 months ago)
Mehul
Photo of md5-375f12d6cdbb3bc6accdbd819d657bf3
Mehul
06:12 AM
<template>
  <ais-instant-search-ssr>
    <ais-index
      index-name="instant_search_demo_query_suggestions"
      index-id="querySuggestions"
    >
      <ais-search-box />
      <ais-configure :hits-per-page.camel="5" />
      <ais-hits>
        <template v-slot:item="{ item }">
          <ais-highlight
            attribute="query"
            :hit="item"
          />
        </template>
      </ais-hits>
      <ais-pagination />
    </ais-index>
    <ais-search-box />
    <ais-stats />
    <ais-index
      index-id="refinement"
      index-name="instant_search"
    >
      <ais-refinement-list attribute="brand" />
    </ais-index>
    <ais-hits>
      <template v-slot:item="{ item }">
        <p>
          <ais-highlight
            attribute="name"
            :hit="item"
          />
        </p>
        <p>
          <ais-highlight
            attribute="brand"
            :hit="item"
          />
        </p>
      </template>
    </ais-hits>
    <ais-pagination />
  </ais-instant-search-ssr>
</template>

<script>
import {
  AisInstantSearchSsr,
  AisIndex,
  AisConfigure,
  AisRefinementList,
  AisHits,
  AisHighlight,
  AisSearchBox,
  AisStats,
  AisPagination
} from 'vue-instantsearch';
import { typesense } from 'config'
import TypesenseInstantSearchAdapter from 'typesense-instantsearch-adapter';
const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
  server: typesense,
  cacheSearchResultsForSeconds: 2 * 60,
  additionalSearchParameters: {
    perPage: 50,
    length: 50,
    queryBy: 'product_name,sku',
  },
});
const searchClient = typesenseInstantsearchAdapter.searchClient;

export default {
  components: {
    AisInstantSearchSsr,
    AisIndex,
    AisConfigure,
    AisRefinementList,
    AisHits,
    AisHighlight,
    AisSearchBox,
    AisStats,
    AisPagination,
  },
  head() {
    return {
      link: [
        {
          rel: 'stylesheet',
          href:
            '',
        },
      ],
    };
  },
};
</script>

<style>
.ais-Hits-list {
  text-align: left;
}
.ais-Hits-list:empty {
  margin: 0;
}
.ais-InstantSearch {
  margin: 1em;
}
</style>
Feb 10, 2022 (23 months ago)
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
04:34 PM
Mehul It looks like you might need to get the vue storefront build process to transpile vue-instantsearch first.

For eg, I found a very similar issue with another library when used with Nuxt: https://github.com/nuxt/nuxt.js/issues/9223#issuecomment-834832352

I'm not familiar with Vue storefront, but may be there's a way to do the same thing in vue-storefront as well?