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.
Feb 04, 2022 (23 months ago)
Mehul
11:41 AMKishore Nallan
12:27 PMFeb 09, 2022 (23 months ago)
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
04:34 PMFor 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?
Typesense
Indexed 3015 threads (79% resolved)
Similar Threads
Troubleshooting Vue Instantsearch Numerical Field Filtering
em1nos experienced issues with Vue Instantsearch on numerical field, which got resolved after updating the adapter. Kishore Nallan and Jason assisted in the process.
Resolving Typesense Setup Issues with VueJS
A sought help with setting up Typesense in a CDN VueJS application. Jason guided him to adjust the initialization and provided a solution to an undefined item warning, resulting in a successful setup.
Troubleshooting Typesense-Instantsearch Adapter Version Compatibility
Steve noticed JavaScript errors when using a specific typesense-instantsearch adapter with Instantsearch.js. Jason provided support but a solution is yet to be identified.