[{"_path":"/advanced/vue-instantsearch","_draft":false,"_partial":false,"_empty":false,"title":"Vue Instantsearch","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"using-with-vue-instantsearch-components"},"children":[{"type":"text","value":"Using with Vue-Instantsearch components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default, Algolia module only provides the search functionality but you can enable the vue-instantsearch components support to have Vue 3 components ready to serve as search and result components."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to enable them, first add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"instantSearch"}]},{"type":"text","value":" configuration option to module configuration:"}]},{"type":"element","tag":"code","props":{"code":"import { defineNuxtConfig } from 'nuxt3'\n\nexport default defineNuxtConfig({\n  modules: ['@nuxtjs/algolia'],\n  algolia: {\n    apiKey: process.env.ALGOLIA_SEARCH_API_KEY,\n    applicationId: process.env.ALGOLIA_APPLICATION_ID,\n    instantSearch: {\n      theme: 'algolia'\n    }\n  }\n})\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { defineNuxtConfig } from 'nuxt3'\n\nexport default defineNuxtConfig({\n  modules: ['@nuxtjs/algolia'],\n  algolia: {\n    apiKey: process.env.ALGOLIA_SEARCH_API_KEY,\n    applicationId: process.env.ALGOLIA_APPLICATION_ID,\n    instantSearch: {\n      theme: 'algolia'\n    }\n  }\n})\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"You can choose a theme from "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"satellite"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"reset"}]},{"type":"text","value":", and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"algolia"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Next, let's create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"indexName"}]},{"type":"text","value":" variable, call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useAlgolia"}]},{"type":"text","value":" composable in page.vue script section to get the reference to Algolia, and import Vue Instantsearch components:"}]},{"type":"element","tag":"code","props":{"code":"<script lang=\"ts\" setup>\nconst indexName = 'test_index' \nconst algolia = useAlgoliaRef()\nimport { AisInstantSearch, AisSearchBox, AisHits } from 'vue-instantsearch/vue3/es'\n</script>\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script lang=\"ts\" setup>\nconst indexName = 'test_index' \nconst algolia = useAlgoliaRef()\nimport { AisInstantSearch, AisSearchBox, AisHits } from 'vue-instantsearch/vue3/es'\n</script>\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Finally, let's use it in our page.vue template section with vue-instantsearch components:"}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <div>\n    <ais-instant-search :index-name=\"indexName\" :search-client=\"algolia\">\n      <ais-search-box />\n      <ais-hits />\n    </ais-instant-search>\n  </div>\n</template>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n  <div>\n    <ais-instant-search :index-name=\"indexName\" :search-client=\"algolia\">\n      <ais-search-box />\n      <ais-hits />\n    </ais-instant-search>\n  </div>\n</template>\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"using-vue-instantsearch-with-ssr"},"children":[{"type":"text","value":"Using vue-instantsearch with SSR"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Server-side rendering requires a few extra steps and can be implemented by using two approaches."}]},{"type":"element","tag":"h3","props":{"id":"with-render-function"},"children":[{"type":"text","value":"With "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"render"}]},{"type":"text","value":" function"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use the approach with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"render"}]},{"type":"text","value":" function, first we need to extract "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"instantsearch"}]},{"type":"text","value":" instance from the mixin and provide it to all "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"vue-instantsearch"}]},{"type":"text","value":" components:"}]},{"type":"element","tag":"code","props":{"code":"import { createServerRootMixin } from 'vue-instantsearch/vue3/es'\nimport { renderToString } from 'vue/server-renderer'\n\nconst serverRootMixin = ref(\n  createServerRootMixin({\n    searchClient: algolia,\n    indexName,\n  }),\n)\n\nconst { instantsearch } = serverRootMixin.value.data()\n\nprovide('$_ais_ssrInstantSearchInstance', instantsearch)\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { createServerRootMixin } from 'vue-instantsearch/vue3/es'\nimport { renderToString } from 'vue/server-renderer'\n\nconst serverRootMixin = ref(\n  createServerRootMixin({\n    searchClient: algolia,\n    indexName,\n  }),\n)\n\nconst { instantsearch } = serverRootMixin.value.data()\n\nprovide('$_ais_ssrInstantSearchInstance', instantsearch)\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then load the results using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useAsyncData"}]},{"type":"text","value":" and hydrate them on the client:"}]},{"type":"element","tag":"code","props":{"code":"onBeforeMount(() => {\n  // Use data loaded on the server\n  if (algoliaState.value) {\n    instantsearch.hydrate(algoliaState.value)\n  }\n})\n\nconst { data: algoliaState } = await useAsyncData('algolia-state', async () => {\n    if (import.meta.server) {\n        const nuxtApp = useNuxtApp();\n        nuxtApp.$algolia.transporter.requester = (\n            await import('@algolia/requester-node-http').then(\n                (lib) => lib.default || lib\n            )\n        ).createNodeHttpRequester();\n    }\n    return instantsearch.findResultsState({\n        // IMPORTANT: a component with access to `this.instantsearch` to be used by the createServerRootMixin code\n        component: {\n            $options: {\n                components: {\n                    AisInstantSearchSsr,\n                    AisIndex,\n                    AisConfigure,\n                    AisRefinementList,\n                    AisHits,\n                    AisHighlight,\n                    AisSearchBox,\n                    AisStats,\n                    AisPagination,\n                },\n                data() {\n                    return { instantsearch };\n                },\n                provide: { $_ais_ssrInstantSearchInstance: instantsearch },\n                render() {\n                    return h(AisInstantSearchSsr, null, () => [\n                        // Include any vue-instantsearch components that you use including each refinement attribute\n                        h(AisHits),\n                    ]);\n                },\n            },\n        },\n        renderToString,\n    });\n})\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"onBeforeMount(() => {\n  // Use data loaded on the server\n  if (algoliaState.value) {\n    instantsearch.hydrate(algoliaState.value)\n  }\n})\n\nconst { data: algoliaState } = await useAsyncData('algolia-state', async () => {\n    if (import.meta.server) {\n        const nuxtApp = useNuxtApp();\n        nuxtApp.$algolia.transporter.requester = (\n            await import('@algolia/requester-node-http').then(\n                (lib) => lib.default || lib\n            )\n        ).createNodeHttpRequester();\n    }\n    return instantsearch.findResultsState({\n        // IMPORTANT: a component with access to `this.instantsearch` to be used by the createServerRootMixin code\n        component: {\n            $options: {\n                components: {\n                    AisInstantSearchSsr,\n                    AisIndex,\n                    AisConfigure,\n                    AisRefinementList,\n                    AisHits,\n                    AisHighlight,\n                    AisSearchBox,\n                    AisStats,\n                    AisPagination,\n                },\n                data() {\n                    return { instantsearch };\n                },\n                provide: { $_ais_ssrInstantSearchInstance: instantsearch },\n                render() {\n                    return h(AisInstantSearchSsr, null, () => [\n                        // Include any vue-instantsearch components that you use including each refinement attribute\n                        h(AisHits),\n                    ]);\n                },\n            },\n        },\n        renderToString,\n    });\n})\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can also check out the following Stackblitz link with the usage of above approach in SSR:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://stackblitz.com/github/plexus77/nuxt-3-algolia-ssr?file=nuxt.config.ts","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://stackblitz.com/github/plexus77/nuxt-3-algolia-ssr?file=nuxt.config.ts"}]}]},{"type":"element","tag":"h3","props":{"id":"without-render-function"},"children":[{"type":"text","value":"Without "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"render"}]},{"type":"text","value":" function"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As explained by Rigo "},{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt-modules/algolia/issues/187","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]},{"type":"text","value":" there is a way of having SSR Instantsearch without a need for using a render function:"}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <div>\n    <AisInstantSearchSsr>\n      <AisConfigure :hits-per-page.camel=\"4\" v-if=\"$route.params.indexName === 'instant_search'\"\n        :facet-filters.camel=\"`brand:${$route.params.brand}`\" />\n      <AisRefinementList :attribute=\"$route.params.indexName === 'airbnb' ? 'room_type' : 'categories'\n        \">\n      </AisRefinementList>\n      <AisInfiniteHits show-previous>\n        <template #loadPrevious=\"{ isFirstPage, refinePrevious }\">\n          <button :disabled=\"isFirstPage\" @click=\"refinePrevious\">\n            Load less\n          </button>\n        </template>\n        <template v-slot=\"{ items, refineNext, isLastPage }\">\n          <div class=\"cont\">\n            <div v-for=\"item in items\" :key=\"item.objectID\" class=\"item\">\n              {{ item.name }}\n              <img :src=\"item.image ?? item.thumbnail_url\" />\n              {{ item }}\n            </div>\n          </div>\n          <button :disabled=\"isLastPage\" @click=\"refineNext\">Load more</button>\n        </template>\n      </AisInfiniteHits>\n    </AisInstantSearchSsr>\n  </div>\n</template>\n<script>\nimport { renderToString } from \"vue/server-renderer\";\nimport {\n  AisInstantSearchSsr,\n  AisRefinementList,\n  AisInfiniteHits,\n  AisIndex,\n  AisConfigure,\n  // @ts-ignore\n} from \"vue-instantsearch/vue3/es/index.js\";\n\nexport default defineNuxtComponent({\n  components: {\n    AisInstantSearchSsr,\n    AisRefinementList,\n    AisInfiniteHits,\n    AisIndex,\n    AisConfigure,\n  },\n  inject: [\"$_ais_ssrInstantSearchInstance\"],\n  async serverPrefetch() {\n    const s = await this[\"$_ais_ssrInstantSearchInstance\"].findResultsState({\n      component: this,\n      renderToString,\n    });\n    this.$nuxt.ssrContext.payload.data.algoliaState = s;\n  },\n  props: {\n    indexName: {\n      type: String,\n      required: false,\n      default: null,\n    },\n  },\n  mounted() {\n    console.log(this.$_ais_ssrInstantSearchInstance);\n    setTimeout(() => { }, 5000);\n  },\n  async beforeMount() {\n    if (this.$nuxt.payload.data.algoliaState) {\n      this.$_ais_ssrInstantSearchInstance.hydrate(\n        this.$nuxt.payload.data.algoliaState,\n      );\n    } else {\n      // somehow, it needs to be disposed and refreshed when i change route with client side navigation\n      this.instantsearch.dispose();\n\n      this.$nextTick(() => {\n        this.$nextTick(() => {\n          this.instantsearch.helper.setIndex(this.indexName).search();\n        });\n      });\n    }\n    // avoid double hydration\n    delete this.$nuxt.payload.data.algoliaState;\n  },\n});\n</script>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n  <div>\n    <AisInstantSearchSsr>\n      <AisConfigure :hits-per-page.camel=\"4\" v-if=\"$route.params.indexName === 'instant_search'\"\n        :facet-filters.camel=\"`brand:${$route.params.brand}`\" />\n      <AisRefinementList :attribute=\"$route.params.indexName === 'airbnb' ? 'room_type' : 'categories'\n        \">\n      </AisRefinementList>\n      <AisInfiniteHits show-previous>\n        <template #loadPrevious=\"{ isFirstPage, refinePrevious }\">\n          <button :disabled=\"isFirstPage\" @click=\"refinePrevious\">\n            Load less\n          </button>\n        </template>\n        <template v-slot=\"{ items, refineNext, isLastPage }\">\n          <div class=\"cont\">\n            <div v-for=\"item in items\" :key=\"item.objectID\" class=\"item\">\n              {{ item.name }}\n              <img :src=\"item.image ?? item.thumbnail_url\" />\n              {{ item }}\n            </div>\n          </div>\n          <button :disabled=\"isLastPage\" @click=\"refineNext\">Load more</button>\n        </template>\n      </AisInfiniteHits>\n    </AisInstantSearchSsr>\n  </div>\n</template>\n<script>\nimport { renderToString } from \"vue/server-renderer\";\nimport {\n  AisInstantSearchSsr,\n  AisRefinementList,\n  AisInfiniteHits,\n  AisIndex,\n  AisConfigure,\n  // @ts-ignore\n} from \"vue-instantsearch/vue3/es/index.js\";\n\nexport default defineNuxtComponent({\n  components: {\n    AisInstantSearchSsr,\n    AisRefinementList,\n    AisInfiniteHits,\n    AisIndex,\n    AisConfigure,\n  },\n  inject: [\"$_ais_ssrInstantSearchInstance\"],\n  async serverPrefetch() {\n    const s = await this[\"$_ais_ssrInstantSearchInstance\"].findResultsState({\n      component: this,\n      renderToString,\n    });\n    this.$nuxt.ssrContext.payload.data.algoliaState = s;\n  },\n  props: {\n    indexName: {\n      type: String,\n      required: false,\n      default: null,\n    },\n  },\n  mounted() {\n    console.log(this.$_ais_ssrInstantSearchInstance);\n    setTimeout(() => { }, 5000);\n  },\n  async beforeMount() {\n    if (this.$nuxt.payload.data.algoliaState) {\n      this.$_ais_ssrInstantSearchInstance.hydrate(\n        this.$nuxt.payload.data.algoliaState,\n      );\n    } else {\n      // somehow, it needs to be disposed and refreshed when i change route with client side navigation\n      this.instantsearch.dispose();\n\n      this.$nextTick(() => {\n        this.$nextTick(() => {\n          this.instantsearch.helper.setIndex(this.indexName).search();\n        });\n      });\n    }\n    // avoid double hydration\n    delete this.$nuxt.payload.data.algoliaState;\n  },\n});\n</script>\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out following link for more details"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/Rigo-m/nuxt-ssr-algolia-example/blob/main/components/InstantSearchProvider.vue","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://github.com/Rigo-m/nuxt-ssr-algolia-example/blob/main/components/InstantSearchProvider.vue"}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"using-with-vue-instantsearch-components"},"children":[{"type":"text","value":"Using with Vue-Instantsearch components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default, Algolia module only provides the search functionality but you can enable the vue-instantsearch components support to have Vue 3 components ready to serve as search and result components."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to enable them, first add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"instantSearch"}]},{"type":"text","value":" configuration option to module configuration:"}]},{"type":"element","tag":"code","props":{"code":"import { defineNuxtConfig } from 'nuxt3'\n\nexport default defineNuxtConfig({\n  modules: ['@nuxtjs/algolia'],\n  algolia: {\n    apiKey: process.env.ALGOLIA_SEARCH_API_KEY,\n    applicationId: process.env.ALGOLIA_APPLICATION_ID,\n    instantSearch: {\n      theme: 'algolia'\n    }\n  }\n})\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"'nuxt3'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"modules"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":": ["}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"'@nuxtjs/algolia'"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"algolia"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"apiKey"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"ALGOLIA_SEARCH_API_KEY"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"applicationId"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"ALGOLIA_APPLICATION_ID"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"instantSearch"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"theme"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"'algolia'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"You can choose a theme from "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"satellite"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"reset"}]},{"type":"text","value":", and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"algolia"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Next, let's create "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"indexName"}]},{"type":"text","value":" variable, call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useAlgolia"}]},{"type":"text","value":" composable in page.vue script section to get the reference to Algolia, and import Vue Instantsearch components:"}]},{"type":"element","tag":"code","props":{"code":"<script lang=\"ts\" setup>\nconst indexName = 'test_index' \nconst algolia = useAlgoliaRef()\nimport { AisInstantSearch, AisSearchBox, AisHits } from 'vue-instantsearch/vue3/es'\n</script>\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d042a3"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"class":"ct-d042a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"class":"ct-d042a3"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"indexName"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d042a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"'test_index'"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"algolia"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d042a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"useAlgoliaRef"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisInstantSearch"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisSearchBox"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisHits"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"'vue-instantsearch/vue3/es'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d042a3"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-d042a3"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Finally, let's use it in our page.vue template section with vue-instantsearch components:"}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <div>\n    <ais-instant-search :index-name=\"indexName\" :search-client=\"algolia\">\n      <ais-search-box />\n      <ais-hits />\n    </ais-instant-search>\n  </div>\n</template>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"ais-instant-search"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":":index-name"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"\"indexName\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":":search-client"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"\"algolia\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"ais-search-box"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"ais-hits"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"ais-instant-search"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"using-vue-instantsearch-with-ssr"},"children":[{"type":"text","value":"Using vue-instantsearch with SSR"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Server-side rendering requires a few extra steps and can be implemented by using two approaches."}]},{"type":"element","tag":"h3","props":{"id":"with-render-function"},"children":[{"type":"text","value":"With "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"render"}]},{"type":"text","value":" function"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use the approach with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"render"}]},{"type":"text","value":" function, first we need to extract "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"instantsearch"}]},{"type":"text","value":" instance from the mixin and provide it to all "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"vue-instantsearch"}]},{"type":"text","value":" components:"}]},{"type":"element","tag":"code","props":{"code":"import { createServerRootMixin } from 'vue-instantsearch/vue3/es'\nimport { renderToString } from 'vue/server-renderer'\n\nconst serverRootMixin = ref(\n  createServerRootMixin({\n    searchClient: algolia,\n    indexName,\n  }),\n)\n\nconst { instantsearch } = serverRootMixin.value.data()\n\nprovide('$_ais_ssrInstantSearchInstance', instantsearch)\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"createServerRootMixin"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"'vue-instantsearch/vue3/es'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"renderToString"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"'vue/server-renderer'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"serverRootMixin"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d042a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"createServerRootMixin"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"searchClient"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"algolia"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"indexName"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"instantsearch"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d042a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"serverRootMixin"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"provide"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"'$_ais_ssrInstantSearchInstance'"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"instantsearch"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":")"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then load the results using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useAsyncData"}]},{"type":"text","value":" and hydrate them on the client:"}]},{"type":"element","tag":"code","props":{"code":"onBeforeMount(() => {\n  // Use data loaded on the server\n  if (algoliaState.value) {\n    instantsearch.hydrate(algoliaState.value)\n  }\n})\n\nconst { data: algoliaState } = await useAsyncData('algolia-state', async () => {\n    if (import.meta.server) {\n        const nuxtApp = useNuxtApp();\n        nuxtApp.$algolia.transporter.requester = (\n            await import('@algolia/requester-node-http').then(\n                (lib) => lib.default || lib\n            )\n        ).createNodeHttpRequester();\n    }\n    return instantsearch.findResultsState({\n        // IMPORTANT: a component with access to `this.instantsearch` to be used by the createServerRootMixin code\n        component: {\n            $options: {\n                components: {\n                    AisInstantSearchSsr,\n                    AisIndex,\n                    AisConfigure,\n                    AisRefinementList,\n                    AisHits,\n                    AisHighlight,\n                    AisSearchBox,\n                    AisStats,\n                    AisPagination,\n                },\n                data() {\n                    return { instantsearch };\n                },\n                provide: { $_ais_ssrInstantSearchInstance: instantsearch },\n                render() {\n                    return h(AisInstantSearchSsr, null, () => [\n                        // Include any vue-instantsearch components that you use including each refinement attribute\n                        h(AisHits),\n                    ]);\n                },\n            },\n        },\n        renderToString,\n    });\n})\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"onBeforeMount"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52b3"},"children":[{"type":"text","value":"// Use data loaded on the server"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"algoliaState"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"instantsearch"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"hydrate"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"algoliaState"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"})"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"algoliaState"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-d042a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"useAsyncData"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"'algolia-state'"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"meta"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"nuxtApp"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d042a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"useNuxtApp"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"nuxtApp"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"$algolia"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"transporter"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"requester"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d042a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"'@algolia/requester-node-http'"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"                ("}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"lib"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"lib"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d042a3"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"lib"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"            )"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"        )."}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"createNodeHttpRequester"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"instantsearch"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"findResultsState"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52b3"},"children":[{"type":"text","value":"// IMPORTANT: a component with access to `this.instantsearch` to be used by the createServerRootMixin code"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"component"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"$options"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"components"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"                    "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisInstantSearchSsr"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"                    "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisIndex"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"                    "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisConfigure"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"                    "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisRefinementList"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"                    "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisHits"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"                    "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisHighlight"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"                    "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisSearchBox"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"                    "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisStats"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"                    "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisPagination"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"                },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"                    "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"instantsearch"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"                },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"provide"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":": { "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"$_ais_ssrInstantSearchInstance"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"instantsearch"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"render"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"                    "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisInstantSearchSsr"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":", () "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"                        "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52b3"},"children":[{"type":"text","value":"// Include any vue-instantsearch components that you use including each refinement attribute"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"                        "}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisHits"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"                    ]);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"                },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"            },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"        },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"renderToString"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can also check out the following Stackblitz link with the usage of above approach in SSR:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://stackblitz.com/github/plexus77/nuxt-3-algolia-ssr?file=nuxt.config.ts","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://stackblitz.com/github/plexus77/nuxt-3-algolia-ssr?file=nuxt.config.ts"}]}]},{"type":"element","tag":"h3","props":{"id":"without-render-function"},"children":[{"type":"text","value":"Without "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"render"}]},{"type":"text","value":" function"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As explained by Rigo "},{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt-modules/algolia/issues/187","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]},{"type":"text","value":" there is a way of having SSR Instantsearch without a need for using a render function:"}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <div>\n    <AisInstantSearchSsr>\n      <AisConfigure :hits-per-page.camel=\"4\" v-if=\"$route.params.indexName === 'instant_search'\"\n        :facet-filters.camel=\"`brand:${$route.params.brand}`\" />\n      <AisRefinementList :attribute=\"$route.params.indexName === 'airbnb' ? 'room_type' : 'categories'\n        \">\n      </AisRefinementList>\n      <AisInfiniteHits show-previous>\n        <template #loadPrevious=\"{ isFirstPage, refinePrevious }\">\n          <button :disabled=\"isFirstPage\" @click=\"refinePrevious\">\n            Load less\n          </button>\n        </template>\n        <template v-slot=\"{ items, refineNext, isLastPage }\">\n          <div class=\"cont\">\n            <div v-for=\"item in items\" :key=\"item.objectID\" class=\"item\">\n              {{ item.name }}\n              <img :src=\"item.image ?? item.thumbnail_url\" />\n              {{ item }}\n            </div>\n          </div>\n          <button :disabled=\"isLastPage\" @click=\"refineNext\">Load more</button>\n        </template>\n      </AisInfiniteHits>\n    </AisInstantSearchSsr>\n  </div>\n</template>\n<script>\nimport { renderToString } from \"vue/server-renderer\";\nimport {\n  AisInstantSearchSsr,\n  AisRefinementList,\n  AisInfiniteHits,\n  AisIndex,\n  AisConfigure,\n  // @ts-ignore\n} from \"vue-instantsearch/vue3/es/index.js\";\n\nexport default defineNuxtComponent({\n  components: {\n    AisInstantSearchSsr,\n    AisRefinementList,\n    AisInfiniteHits,\n    AisIndex,\n    AisConfigure,\n  },\n  inject: [\"$_ais_ssrInstantSearchInstance\"],\n  async serverPrefetch() {\n    const s = await this[\"$_ais_ssrInstantSearchInstance\"].findResultsState({\n      component: this,\n      renderToString,\n    });\n    this.$nuxt.ssrContext.payload.data.algoliaState = s;\n  },\n  props: {\n    indexName: {\n      type: String,\n      required: false,\n      default: null,\n    },\n  },\n  mounted() {\n    console.log(this.$_ais_ssrInstantSearchInstance);\n    setTimeout(() => { }, 5000);\n  },\n  async beforeMount() {\n    if (this.$nuxt.payload.data.algoliaState) {\n      this.$_ais_ssrInstantSearchInstance.hydrate(\n        this.$nuxt.payload.data.algoliaState,\n      );\n    } else {\n      // somehow, it needs to be disposed and refreshed when i change route with client side navigation\n      this.instantsearch.dispose();\n\n      this.$nextTick(() => {\n        this.$nextTick(() => {\n          this.instantsearch.helper.setIndex(this.indexName).search();\n        });\n      });\n    }\n    // avoid double hydration\n    delete this.$nuxt.payload.data.algoliaState;\n  },\n});\n</script>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"AisInstantSearchSsr"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"AisConfigure"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" :"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"hits-per-page"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"camel"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"v-if"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"$route"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"params"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"indexName"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d042a3"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"'instant_search'"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"        :"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"facet-filters"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"camel"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"`brand:"}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"$route"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"params"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"brand"}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"AisRefinementList"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" :"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"attribute"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"$route"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"params"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"indexName"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d042a3"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"'airbnb'"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"'room_type'"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"'categories'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"      </"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"AisRefinementList"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"AisInfiniteHits"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"show-previous"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"        <"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"loadPrevious"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"{ "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"isFirstPage"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"refinePrevious"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" }"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"          <"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"button"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" :"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"disabled"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"isFirstPage"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" @"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"click"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"refinePrevious"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"Load"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"less"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"          </"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"button"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"        </"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"        <"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"v-slot"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"{ "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"refineNext"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"isLastPage"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" }"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"          <"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"\"cont\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"            <"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"v-for"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"item"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"in"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" :"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"item"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"objectID"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"\"item\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"              {{ "}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"item"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" }}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"              <"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" :"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"item"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d042a3"},"children":[{"type":"text","value":"??"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"item"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"thumbnail_url"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"              {{ "}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"item"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" }}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"            </"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"          </"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"          <"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"button"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" :"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"disabled"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"isLastPage"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" @"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"click"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"refineNext"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"Load"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"more"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"button"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"        </"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"      </"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"AisInfiniteHits"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"AisInstantSearchSsr"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"renderToString"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"\"vue/server-renderer\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisInstantSearchSsr"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisRefinementList"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisInfiniteHits"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisIndex"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisConfigure"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52b3"},"children":[{"type":"text","value":"// @ts-ignore"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"} "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"\"vue-instantsearch/vue3/es/index.js\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"defineNuxtComponent"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"components"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisInstantSearchSsr"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisRefinementList"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisInfiniteHits"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisIndex"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"AisConfigure"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"inject"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":": ["}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"\"$_ais_ssrInstantSearchInstance\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"serverPrefetch"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"s"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d042a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-748ea2"},"children":[{"type":"text","value":"\"$_ais_ssrInstantSearchInstance\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"]."}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"findResultsState"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"component"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"renderToString"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"$nuxt"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"ssrContext"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"payload"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"algoliaState"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d042a3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"s"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"indexName"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"required"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"mounted"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"$_ais_ssrInstantSearchInstance"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-d042a3"},"children":[{"type":"text","value":"setTimeout"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" { }, "}]},{"type":"element","tag":"span","props":{"class":"ct-e494d2"},"children":[{"type":"text","value":"5000"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"beforeMount"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"$nuxt"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"payload"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"algoliaState"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"$_ais_ssrInstantSearchInstance"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"hydrate"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"$nuxt"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"payload"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"algoliaState"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"      );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    } "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"else"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52b3"},"children":[{"type":"text","value":"// somehow, it needs to be disposed and refreshed when i change route with client side navigation"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"instantsearch"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"dispose"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"$nextTick"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"$nextTick"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"instantsearch"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"helper"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"setIndex"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"indexName"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-36c41e"},"children":[{"type":"text","value":"search"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"        });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"      });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-ea52b3"},"children":[{"type":"text","value":"// avoid double hydration"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-cb1b1c"},"children":[{"type":"text","value":"delete"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"$nuxt"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"payload"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f6f4c"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"algoliaState"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"  },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"});"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-7738e7"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-0c26a7"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out following link for more details"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/Rigo-m/nuxt-ssr-algolia-example/blob/main/components/InstantSearchProvider.vue","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://github.com/Rigo-m/nuxt-ssr-algolia-example/blob/main/components/InstantSearchProvider.vue"}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-ea52b3{color:#7F848E}.ct-e494d2{color:#D19A66}.ct-d042a3{color:#56B6C2}.ct-6f6f4c{color:#E5C07B}.ct-36c41e{color:#61AFEF}.ct-748ea2{color:#98C379}.ct-7738e7{color:#E06C75}.ct-0c26a7{color:#ABB2BF}.ct-cb1b1c{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"using-with-vue-instantsearch-components","depth":2,"text":"Using with Vue-Instantsearch components"},{"id":"using-vue-instantsearch-with-ssr","depth":2,"text":"Using vue-instantsearch with SSR","children":[{"id":"with-render-function","depth":3,"text":"With render function"},{"id":"without-render-function","depth":3,"text":"Without render function"}]}]}},"_type":"markdown","_id":"content:2.advanced:1.vue-instantsearch.md","_source":"content","_file":"2.advanced/1.vue-instantsearch.md","_extension":"md"},{"_path":"/advanced/er","_draft":false,"_partial":false,"_empty":false,"title":"Indexer","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"This feature works only for Server Side Rendered (SSR) applications. If you are using Statically Generated Site, please use Serverless functions instead."}]}]},{"type":"element","tag":"h2","props":{"id":"storyblok"},"children":[{"type":"text","value":"Storyblok"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are interested in building a Nuxt 3 application with Algolia search that is powered by Storyblok CMS (with automatic Algolia search indexing) you can check out the article for Storyblok about it "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/tp/using-storyblok-algolia-in-nuxt-3","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]},{"type":"text","value":". It explains how to build the indexer from scratch. You can also use the built in indexer that does the same thing."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to enable it, first add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"indexer"}]},{"type":"text","value":" configuration option to module configuration:"}]},{"type":"element","tag":"code","props":{"code":"import { defineNuxtConfig } from 'nuxt'\n\nexport default defineNuxtConfig({\n  modules: ['@nuxtjs/algolia'],\n  algolia: {\n    apiKey: process.env.ALGOLIA_SEARCH_API_KEY,\n    applicationId: process.env.ALGOLIA_APPLICATION_ID,\n    indexer: {\n      storyblok: {\n        secret: process.env.INDEXER_SECRET,\n        algoliaAdminApiKey: process.env.ALGOLIA_ADMIN_KEY,\n        indexName: process.env.ALGOLIA_INDEX_NAME,\n        accessToken: process.env.STORYBLOK_ACCESS_TOKEN\n      }\n    }\n})\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { defineNuxtConfig } from 'nuxt'\n\nexport default defineNuxtConfig({\n  modules: ['@nuxtjs/algolia'],\n  algolia: {\n    apiKey: process.env.ALGOLIA_SEARCH_API_KEY,\n    applicationId: process.env.ALGOLIA_APPLICATION_ID,\n    indexer: {\n      storyblok: {\n        secret: process.env.INDEXER_SECRET,\n        algoliaAdminApiKey: process.env.ALGOLIA_ADMIN_KEY,\n        indexName: process.env.ALGOLIA_INDEX_NAME,\n        accessToken: process.env.STORYBLOK_ACCESS_TOKEN\n      }\n    }\n})\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It will automatically register a new server middleware that you can access manually or by using a webhook to trigger automatic indexing after content change. Remember to create appriopriate "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secret"}]},{"type":"text","value":" property and add it to the webhook configuration so that the indexing could be triggered correctly. You can test if it works correctly by accessing a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/api/indexer?secret=<YOUR_SECRET>"}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"This feature works only for Server Side Rendered (SSR) applications. If you are using Statically Generated Site, please use Serverless functions instead."}]}]},{"type":"element","tag":"h2","props":{"id":"storyblok"},"children":[{"type":"text","value":"Storyblok"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are interested in building a Nuxt 3 application with Algolia search that is powered by Storyblok CMS (with automatic Algolia search indexing) you can check out the article for Storyblok about it "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/tp/using-storyblok-algolia-in-nuxt-3","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]},{"type":"text","value":". It explains how to build the indexer from scratch. You can also use the built in indexer that does the same thing."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to enable it, first add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"indexer"}]},{"type":"text","value":" configuration option to module configuration:"}]},{"type":"element","tag":"code","props":{"code":"import { defineNuxtConfig } from 'nuxt'\n\nexport default defineNuxtConfig({\n  modules: ['@nuxtjs/algolia'],\n  algolia: {\n    apiKey: process.env.ALGOLIA_SEARCH_API_KEY,\n    applicationId: process.env.ALGOLIA_APPLICATION_ID,\n    indexer: {\n      storyblok: {\n        secret: process.env.INDEXER_SECRET,\n        algoliaAdminApiKey: process.env.ALGOLIA_ADMIN_KEY,\n        indexName: process.env.ALGOLIA_INDEX_NAME,\n        accessToken: process.env.STORYBLOK_ACCESS_TOKEN\n      }\n    }\n})\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8aa55b"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-acbd7c"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-8aa55b"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a76318"},"children":[{"type":"text","value":"'nuxt'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8aa55b"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8aa55b"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-811375"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-acbd7c"},"children":[{"type":"text","value":"modules"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":": ["}]},{"type":"element","tag":"span","props":{"class":"ct-a76318"},"children":[{"type":"text","value":"'@nuxtjs/algolia'"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-acbd7c"},"children":[{"type":"text","value":"algolia"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-acbd7c"},"children":[{"type":"text","value":"apiKey"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-be1b19"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-be1b19"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-acbd7c"},"children":[{"type":"text","value":"ALGOLIA_SEARCH_API_KEY"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-acbd7c"},"children":[{"type":"text","value":"applicationId"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-be1b19"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-be1b19"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-acbd7c"},"children":[{"type":"text","value":"ALGOLIA_APPLICATION_ID"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-acbd7c"},"children":[{"type":"text","value":"indexer"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-acbd7c"},"children":[{"type":"text","value":"storyblok"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-acbd7c"},"children":[{"type":"text","value":"secret"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-be1b19"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-be1b19"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-acbd7c"},"children":[{"type":"text","value":"INDEXER_SECRET"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-acbd7c"},"children":[{"type":"text","value":"algoliaAdminApiKey"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-be1b19"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-be1b19"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-acbd7c"},"children":[{"type":"text","value":"ALGOLIA_ADMIN_KEY"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-acbd7c"},"children":[{"type":"text","value":"indexName"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-be1b19"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-be1b19"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-acbd7c"},"children":[{"type":"text","value":"ALGOLIA_INDEX_NAME"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-acbd7c"},"children":[{"type":"text","value":"accessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-be1b19"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-be1b19"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-acbd7c"},"children":[{"type":"text","value":"STORYBLOK_ACCESS_TOKEN"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"      }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-13cc69"},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It will automatically register a new server middleware that you can access manually or by using a webhook to trigger automatic indexing after content change. Remember to create appriopriate "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secret"}]},{"type":"text","value":" property and add it to the webhook configuration so that the indexing could be triggered correctly. You can test if it works correctly by accessing a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/api/indexer?secret=<YOUR_SECRET>"}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-be1b19{color:#E5C07B}.ct-811375{color:#61AFEF}.ct-a76318{color:#98C379}.ct-acbd7c{color:#E06C75}.ct-13cc69{color:#ABB2BF}.ct-8aa55b{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"storyblok","depth":2,"text":"Storyblok"}]}},"_type":"markdown","_id":"content:2.advanced:3.indexer.md","_source":"content","_file":"2.advanced/3.indexer.md","_extension":"md"}]