[{"_path":"/getting-started/configuration","_draft":false,"_partial":false,"_empty":false,"title":"Configuration","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"options"},"children":[{"type":"text","value":"Options"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can add custom configuration to the module like following:"}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n  modules: ['@nuxtjs/algolia'],\n  algolia: {\n    // options\n  }\n})\n","filename":"nuxt.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default defineNuxtConfig({\n  modules: ['@nuxtjs/algolia'],\n  algolia: {\n    // options\n  }\n})\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Or"}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n  modules: [\n    ['@nuxtjs/algolia', {\n      // options\n    }]\n  ]\n})\n","filename":"nuxt.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default defineNuxtConfig({\n  modules: [\n    ['@nuxtjs/algolia', {\n      // options\n    }]\n  ]\n})\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Defaults:"}]},{"type":"element","tag":"code","props":{"code":"{\n  apiKey: '<YOUR_SEARCH_API_KEY>',\n  applicationId: '<YOUR_APPLICATION_ID>',\n  globalIndex: '',\n  lite: true,\n  cache: false,\n  instantSearch: true, \n  useFetch: false,\n  crawler: {\n    apiKey: '<YOUR_API_KEY>',\n    indexName: '<YOUR_INDEX_NAME>',\n    meta: ['title', 'description'],\n    include: () => true\n  },\n  recommend: true,\n  indexer: {\n    storyblok: {\n      secret: 'INDEXER_SECRET',\n      algoliaAdminApiKey: 'ALGOLIA_ADMIN_KEY',\n      indexName: 'ALGOLIA_INDEX_NAME',\n      accessToken: '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":"{\n  apiKey: '<YOUR_SEARCH_API_KEY>',\n  applicationId: '<YOUR_APPLICATION_ID>',\n  globalIndex: '',\n  lite: true,\n  cache: false,\n  instantSearch: true, \n  useFetch: false,\n  crawler: {\n    apiKey: '<YOUR_API_KEY>',\n    indexName: '<YOUR_INDEX_NAME>',\n    meta: ['title', 'description'],\n    include: () => true\n  },\n  recommend: true,\n  indexer: {\n    storyblok: {\n      secret: 'INDEXER_SECRET',\n      algoliaAdminApiKey: 'ALGOLIA_ADMIN_KEY',\n      indexName: 'ALGOLIA_INDEX_NAME',\n      accessToken: 'STORYBLOK_ACCESS_TOKEN'\n    }\n  }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"For storing sensitive data such as API keys or Application ID variables we recommend using environment variables (apiKey is ALGOLIA_API_KEY and applicationId is ALGOLIA_APPLICATION_ID) that can later be loaded to Nuxt runtime config. Check out more "},{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/migration/runtime-config#runtime-config","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h3","props":{"id":"apikey"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"apiKey"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is the public API key to use in your frontend code. This key is only usable for search queries and sending data to the Insights API."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can read more about it "},{"type":"element","tag":"a","props":{"href":"https://www.algolia.com/doc/guides/security/api-keys/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]}]}]},{"type":"element","tag":"h3","props":{"id":"applicationid"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"applicationId"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is your unique application identifier. It's used to identify you when using Algolia's API."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can get it "},{"type":"element","tag":"a","props":{"href":"https://www.algolia.com/account/api-keys/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]}]}]},{"type":"element","tag":"h3","props":{"id":"globalindex"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"globalIndex"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default set to empty string. When set in the configuration object, it will use this index name for all "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useAlgoliaSearch"}]},{"type":"text","value":" composables. Then, you do not need to pass the index name as a parameter of this composable."}]},{"type":"element","tag":"h3","props":{"id":"lite"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"lite"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default set to true. Indicates whether to use 'algoliasearch-lite' or normal 'algoliasearch' package. Depending on your needs, if you only need to search you can set this option to true or do not set any option (it is by default true). But if you need more advances functionalities like multi queries, indexing, etc, you can set it to false to load full algoliasearch client."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can get it "},{"type":"element","tag":"a","props":{"href":"https://www.algolia.com/doc/api-client/getting-started/update-the-client/javascript/?client=javascript#search-onlylite-client","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]}]}]},{"type":"element","tag":"h3","props":{"id":"cache"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cache"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default set to false. The client caches requests to Algolia and their responses."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More information available in the official "},{"type":"element","tag":"a","props":{"href":"https://www.algolia.com/doc/api-client/getting-started/customize/javascript/?client=javascript#caching-requests-and-responses","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Algolia docs"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h3","props":{"id":"usefetch"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useFetch"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default set to false. If set to true, it will use "},{"type":"element","tag":"a","props":{"href":"https://github.com/algolia/requester-fetch","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"@algolia/requester-fetch"}]}]},{"type":"text","value":" instead of "},{"type":"element","tag":"a","props":{"href":"https://github.com/algolia/requester-node-http","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"@algolia/requester-node-http"}]}]},{"type":"text","value":". This enables SSR-support for using this module in V8-based environments like Vercel Edge, Cloudflare Workers etc."}]},{"type":"element","tag":"h3","props":{"id":"instantsearch"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"instantSearch"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default set to false. Indicates whether to install the official "},{"type":"element","tag":"a","props":{"href":"https://github.com/algolia/vue-instantsearch","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vue-instantsearch"}]},{"type":"text","value":" plugin. This option can also be an object (see below)."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More information available in the official "},{"type":"element","tag":"a","props":{"href":"https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/vue/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Algolia docs"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h3","props":{"id":"instantsearchtheme"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"instantSearch.theme"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default set to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"satellite"}]},{"type":"text","value":". Indicates which CSS theme to use for the "},{"type":"element","tag":"a","props":{"href":"https://github.com/algolia/vue-instantsearch","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vue-instantsearch"}]},{"type":"text","value":" plugin. Valid values are "},{"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":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"algolia"}]},{"type":"text","value":"."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More information available in the official "},{"type":"element","tag":"a","props":{"href":"https://www.algolia.com/doc/guides/building-search-ui/widgets/customize-an-existing-widget/vue/#style-your-widgets","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Algolia docs"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h3","props":{"id":"crawler"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crawler"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Indicates whether you would like the module to automatically index your pages when using Nuxt static site generation. Both the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"apiKey"}]},{"type":"text","value":" and the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"indexName"}]},{"type":"text","value":" need to be set for this feature to be enabled."}]},{"type":"element","tag":"h4","props":{"id":"crawlerapikey"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crawler.apiKey"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default this option is not set. This is your private API key to use in your backend code. This key is used to update your Algolia index. "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"DO NOT USE YOUR ADMIN KEY!"}]},{"type":"text","value":" Instead use your admin key to generate another "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"limited"}]},{"type":"text","value":" key with at least the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"addObject"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"deleteObject"}]},{"type":"text","value":" rights."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can read more about it "},{"type":"element","tag":"a","props":{"href":"https://www.algolia.com/doc/guides/security/api-keys/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]}]}]},{"type":"element","tag":"h4","props":{"id":"crawlerindexname"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crawler.indexName"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default this option is not set. This is the name of your Algolia index that will store all your pages' metadata."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can check out how to create a new index "},{"type":"element","tag":"a","props":{"href":"https://www.algolia.com/doc/guides/sending-and-managing-data/send-and-update-your-data/how-to/importing-from-the-dashboard/#creating-a-new-index","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]}]}]},{"type":"element","tag":"h4","props":{"id":"crawlermeta"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crawler.meta"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default this option is set to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"['title', 'description']"}]},{"type":"text","value":". This is the list of metafields that you would like to store when indexing a page. It can either be an array of fields or a function that returns an object of fields. The function should return a string and can be asynchronous."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"{\n  ...\n  meta: ['title', 'description', 'lang']\n}\n","filename":"Array","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n  ...\n  meta: ['title', 'description', 'lang']\n}\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"{\n  ...\n  meta: async (html: string, route: string) => {\n    const result = await somePromise(route)\n\n    return {\n      ...result,\n      foo: 'bar'\n    }\n  }\n}\n","filename":"Function","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n  ...\n  meta: async (html: string, route: string) => {\n    const result = await somePromise(route)\n\n    return {\n      ...result,\n      foo: 'bar'\n    }\n  }\n}\n"}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"crawlerinclude"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crawler.include"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default this option is not set. This option is used to filter the pages that you would like to index by their route. It can either be an array of strings and/or regular expressions, or a function that should return a boolean. If the option is undefined, then all pages are indexed (default)."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"{\n  ...\n  include: ['/foo', /^(?!\\/?admin).+/]\n}\n","filename":"Array","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n  ...\n  include: ['/foo', /^(?!\\/?admin).+/]\n}\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"{\n  ...\n  include: (route: string) => {\n    return !route.startsWith('admin')\n  }\n}\n","filename":"Function","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n  ...\n  include: (route: string) => {\n    return !route.startsWith('admin')\n  }\n}\n"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"recommend"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"recommend"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When set to true it will import the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@algolia/recommend"}]},{"type":"text","value":" library used for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useAlgoliaRecommend"}]},{"type":"text","value":" composable to get the recommendations based on certain criteria."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can read more "},{"type":"element","tag":"a","props":{"href":"https://www.algolia.com/products/recommendations/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]}]}]},{"type":"element","tag":"h3","props":{"id":"indexer"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"indexer"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Configuration for automatic indexing of Algolia index by external Content Management System or another source. For now it supports only Storyblok but will support more in the future."}]},{"type":"element","tag":"h4","props":{"id":"indexerstoryblok"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"indexer.storyblok"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Configuration object for using Storyblok as CMS provider in automatic indexing."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secret"}]},{"type":"text","value":" used to verify if an automatic indexing can be triggered. It is a HTTP query sent via GET request and validated with a private runtime config property. Remember to add it to your webhook configuration."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"algoliaAdminApiKey"}]},{"type":"text","value":" used to populate Algolia index programatically."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"indexName"}]},{"type":"text","value":" name of the Algolia index that will be populated after the indexing."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"accessToken"}]},{"type":"text","value":" to Storyblok space."}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"options"},"children":[{"type":"text","value":"Options"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can add custom configuration to the module like following:"}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n  modules: ['@nuxtjs/algolia'],\n  algolia: {\n    // options\n  }\n})\n","filename":"nuxt.config.js","language":"js"},"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-a4fbf8"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a4fbf8"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9d1bff"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-4ff706"},"children":[{"type":"text","value":"modules"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":": ["}]},{"type":"element","tag":"span","props":{"class":"ct-9f61be"},"children":[{"type":"text","value":"'@nuxtjs/algolia'"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-4ff706"},"children":[{"type":"text","value":"algolia"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-390aab"},"children":[{"type":"text","value":"// options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Or"}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n  modules: [\n    ['@nuxtjs/algolia', {\n      // options\n    }]\n  ]\n})\n","filename":"nuxt.config.js","language":"js"},"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-a4fbf8"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a4fbf8"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9d1bff"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-4ff706"},"children":[{"type":"text","value":"modules"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":": ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"    ["}]},{"type":"element","tag":"span","props":{"class":"ct-9f61be"},"children":[{"type":"text","value":"'@nuxtjs/algolia'"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-390aab"},"children":[{"type":"text","value":"// options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"    }]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Defaults:"}]},{"type":"element","tag":"code","props":{"code":"{\n  apiKey: '<YOUR_SEARCH_API_KEY>',\n  applicationId: '<YOUR_APPLICATION_ID>',\n  globalIndex: '',\n  lite: true,\n  cache: false,\n  instantSearch: true, \n  useFetch: false,\n  crawler: {\n    apiKey: '<YOUR_API_KEY>',\n    indexName: '<YOUR_INDEX_NAME>',\n    meta: ['title', 'description'],\n    include: () => true\n  },\n  recommend: true,\n  indexer: {\n    storyblok: {\n      secret: 'INDEXER_SECRET',\n      algoliaAdminApiKey: 'ALGOLIA_ADMIN_KEY',\n      indexName: 'ALGOLIA_INDEX_NAME',\n      accessToken: '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-8e5a41"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  apiKey: "}]},{"type":"element","tag":"span","props":{"class":"ct-9f61be"},"children":[{"type":"text","value":"'<YOUR_SEARCH_API_KEY>'"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  applicationId: "}]},{"type":"element","tag":"span","props":{"class":"ct-9f61be"},"children":[{"type":"text","value":"'<YOUR_APPLICATION_ID>'"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  globalIndex: "}]},{"type":"element","tag":"span","props":{"class":"ct-9f61be"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  lite: "}]},{"type":"element","tag":"span","props":{"class":"ct-807a9a"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  cache: "}]},{"type":"element","tag":"span","props":{"class":"ct-807a9a"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  instantSearch: "}]},{"type":"element","tag":"span","props":{"class":"ct-807a9a"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  useFetch: "}]},{"type":"element","tag":"span","props":{"class":"ct-807a9a"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  crawler: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"    apiKey: "}]},{"type":"element","tag":"span","props":{"class":"ct-9f61be"},"children":[{"type":"text","value":"'<YOUR_API_KEY>'"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"    indexName: "}]},{"type":"element","tag":"span","props":{"class":"ct-9f61be"},"children":[{"type":"text","value":"'<YOUR_INDEX_NAME>'"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"    meta: ["}]},{"type":"element","tag":"span","props":{"class":"ct-9f61be"},"children":[{"type":"text","value":"'title'"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-9f61be"},"children":[{"type":"text","value":"'description'"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"    include: () "}]},{"type":"element","tag":"span","props":{"class":"ct-a4fbf8"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-807a9a"},"children":[{"type":"text","value":"true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  recommend: "}]},{"type":"element","tag":"span","props":{"class":"ct-807a9a"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  indexer: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"    storyblok: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"      secret: "}]},{"type":"element","tag":"span","props":{"class":"ct-9f61be"},"children":[{"type":"text","value":"'INDEXER_SECRET'"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"      algoliaAdminApiKey: "}]},{"type":"element","tag":"span","props":{"class":"ct-9f61be"},"children":[{"type":"text","value":"'ALGOLIA_ADMIN_KEY'"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"      indexName: "}]},{"type":"element","tag":"span","props":{"class":"ct-9f61be"},"children":[{"type":"text","value":"'ALGOLIA_INDEX_NAME'"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"      accessToken: "}]},{"type":"element","tag":"span","props":{"class":"ct-9f61be"},"children":[{"type":"text","value":"'STORYBLOK_ACCESS_TOKEN'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"For storing sensitive data such as API keys or Application ID variables we recommend using environment variables (apiKey is ALGOLIA_API_KEY and applicationId is ALGOLIA_APPLICATION_ID) that can later be loaded to Nuxt runtime config. Check out more "},{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/migration/runtime-config#runtime-config","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h3","props":{"id":"apikey"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"apiKey"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is the public API key to use in your frontend code. This key is only usable for search queries and sending data to the Insights API."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can read more about it "},{"type":"element","tag":"a","props":{"href":"https://www.algolia.com/doc/guides/security/api-keys/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]}]}]},{"type":"element","tag":"h3","props":{"id":"applicationid"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"applicationId"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is your unique application identifier. It's used to identify you when using Algolia's API."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can get it "},{"type":"element","tag":"a","props":{"href":"https://www.algolia.com/account/api-keys/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]}]}]},{"type":"element","tag":"h3","props":{"id":"globalindex"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"globalIndex"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default set to empty string. When set in the configuration object, it will use this index name for all "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useAlgoliaSearch"}]},{"type":"text","value":" composables. Then, you do not need to pass the index name as a parameter of this composable."}]},{"type":"element","tag":"h3","props":{"id":"lite"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"lite"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default set to true. Indicates whether to use 'algoliasearch-lite' or normal 'algoliasearch' package. Depending on your needs, if you only need to search you can set this option to true or do not set any option (it is by default true). But if you need more advances functionalities like multi queries, indexing, etc, you can set it to false to load full algoliasearch client."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can get it "},{"type":"element","tag":"a","props":{"href":"https://www.algolia.com/doc/api-client/getting-started/update-the-client/javascript/?client=javascript#search-onlylite-client","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]}]}]},{"type":"element","tag":"h3","props":{"id":"cache"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cache"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default set to false. The client caches requests to Algolia and their responses."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More information available in the official "},{"type":"element","tag":"a","props":{"href":"https://www.algolia.com/doc/api-client/getting-started/customize/javascript/?client=javascript#caching-requests-and-responses","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Algolia docs"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h3","props":{"id":"usefetch"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useFetch"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default set to false. If set to true, it will use "},{"type":"element","tag":"a","props":{"href":"https://github.com/algolia/requester-fetch","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"@algolia/requester-fetch"}]}]},{"type":"text","value":" instead of "},{"type":"element","tag":"a","props":{"href":"https://github.com/algolia/requester-node-http","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"@algolia/requester-node-http"}]}]},{"type":"text","value":". This enables SSR-support for using this module in V8-based environments like Vercel Edge, Cloudflare Workers etc."}]},{"type":"element","tag":"h3","props":{"id":"instantsearch"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"instantSearch"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default set to false. Indicates whether to install the official "},{"type":"element","tag":"a","props":{"href":"https://github.com/algolia/vue-instantsearch","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vue-instantsearch"}]},{"type":"text","value":" plugin. This option can also be an object (see below)."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More information available in the official "},{"type":"element","tag":"a","props":{"href":"https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/vue/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Algolia docs"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h3","props":{"id":"instantsearchtheme"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"instantSearch.theme"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default set to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"satellite"}]},{"type":"text","value":". Indicates which CSS theme to use for the "},{"type":"element","tag":"a","props":{"href":"https://github.com/algolia/vue-instantsearch","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vue-instantsearch"}]},{"type":"text","value":" plugin. Valid values are "},{"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":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"algolia"}]},{"type":"text","value":"."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More information available in the official "},{"type":"element","tag":"a","props":{"href":"https://www.algolia.com/doc/guides/building-search-ui/widgets/customize-an-existing-widget/vue/#style-your-widgets","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Algolia docs"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h3","props":{"id":"crawler"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crawler"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Indicates whether you would like the module to automatically index your pages when using Nuxt static site generation. Both the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"apiKey"}]},{"type":"text","value":" and the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"indexName"}]},{"type":"text","value":" need to be set for this feature to be enabled."}]},{"type":"element","tag":"h4","props":{"id":"crawlerapikey"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crawler.apiKey"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default this option is not set. This is your private API key to use in your backend code. This key is used to update your Algolia index. "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"DO NOT USE YOUR ADMIN KEY!"}]},{"type":"text","value":" Instead use your admin key to generate another "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"limited"}]},{"type":"text","value":" key with at least the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"addObject"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"deleteObject"}]},{"type":"text","value":" rights."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can read more about it "},{"type":"element","tag":"a","props":{"href":"https://www.algolia.com/doc/guides/security/api-keys/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]}]}]},{"type":"element","tag":"h4","props":{"id":"crawlerindexname"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crawler.indexName"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default this option is not set. This is the name of your Algolia index that will store all your pages' metadata."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can check out how to create a new index "},{"type":"element","tag":"a","props":{"href":"https://www.algolia.com/doc/guides/sending-and-managing-data/send-and-update-your-data/how-to/importing-from-the-dashboard/#creating-a-new-index","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]}]}]},{"type":"element","tag":"h4","props":{"id":"crawlermeta"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crawler.meta"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default this option is set to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"['title', 'description']"}]},{"type":"text","value":". This is the list of metafields that you would like to store when indexing a page. It can either be an array of fields or a function that returns an object of fields. The function should return a string and can be asynchronous."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"{\n  ...\n  meta: ['title', 'description', 'lang']\n}\n","filename":"Array","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-8e5a41"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  meta: ["}]},{"type":"element","tag":"span","props":{"class":"ct-9f61be"},"children":[{"type":"text","value":"'title'"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-9f61be"},"children":[{"type":"text","value":"'description'"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-9f61be"},"children":[{"type":"text","value":"'lang'"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"{\n  ...\n  meta: async (html: string, route: string) => {\n    const result = await somePromise(route)\n\n    return {\n      ...result,\n      foo: 'bar'\n    }\n  }\n}\n","filename":"Function","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-8e5a41"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  meta: "}]},{"type":"element","tag":"span","props":{"class":"ct-a4fbf8"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-4ff706"},"children":[{"type":"text","value":"html"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-a94918"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-4ff706"},"children":[{"type":"text","value":"route"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-a94918"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-a4fbf8"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a4fbf8"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a94918"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b18f6b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a4fbf8"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9d1bff"},"children":[{"type":"text","value":"somePromise"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-4ff706"},"children":[{"type":"text","value":"route"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"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-8e5a41"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a4fbf8"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"      ..."}]},{"type":"element","tag":"span","props":{"class":"ct-4ff706"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-4ff706"},"children":[{"type":"text","value":"foo"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-9f61be"},"children":[{"type":"text","value":"'bar'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"}"}]}]}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"crawlerinclude"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crawler.include"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default this option is not set. This option is used to filter the pages that you would like to index by their route. It can either be an array of strings and/or regular expressions, or a function that should return a boolean. If the option is undefined, then all pages are indexed (default)."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"{\n  ...\n  include: ['/foo', /^(?!\\/?admin).+/]\n}\n","filename":"Array","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-8e5a41"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  include: ["}]},{"type":"element","tag":"span","props":{"class":"ct-9f61be"},"children":[{"type":"text","value":"'/foo'"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-b18f6b"},"children":[{"type":"text","value":" /"}]},{"type":"element","tag":"span","props":{"class":"ct-a4fbf8"},"children":[{"type":"text","value":"^"}]},{"type":"element","tag":"span","props":{"class":"ct-b18f6b"},"children":[{"type":"text","value":"(?!\\/"}]},{"type":"element","tag":"span","props":{"class":"ct-807a9a"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-b18f6b"},"children":[{"type":"text","value":"admin)"}]},{"type":"element","tag":"span","props":{"class":"ct-4ff706"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-807a9a"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-b18f6b"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"{\n  ...\n  include: (route: string) => {\n    return !route.startsWith('admin')\n  }\n}\n","filename":"Function","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-8e5a41"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  include: ("}]},{"type":"element","tag":"span","props":{"class":"ct-4ff706"},"children":[{"type":"text","value":"route"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-a94918"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-a4fbf8"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a4fbf8"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b18f6b"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-a94918"},"children":[{"type":"text","value":"route"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-9d1bff"},"children":[{"type":"text","value":"startsWith"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-9f61be"},"children":[{"type":"text","value":"'admin'"}]},{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8e5a41"},"children":[{"type":"text","value":"}"}]}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"recommend"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"recommend"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When set to true it will import the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@algolia/recommend"}]},{"type":"text","value":" library used for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useAlgoliaRecommend"}]},{"type":"text","value":" composable to get the recommendations based on certain criteria."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can read more "},{"type":"element","tag":"a","props":{"href":"https://www.algolia.com/products/recommendations/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]}]}]},{"type":"element","tag":"h3","props":{"id":"indexer"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"indexer"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Configuration for automatic indexing of Algolia index by external Content Management System or another source. For now it supports only Storyblok but will support more in the future."}]},{"type":"element","tag":"h4","props":{"id":"indexerstoryblok"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"indexer.storyblok"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Configuration object for using Storyblok as CMS provider in automatic indexing."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secret"}]},{"type":"text","value":" used to verify if an automatic indexing can be triggered. It is a HTTP query sent via GET request and validated with a private runtime config property. Remember to add it to your webhook configuration."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"algoliaAdminApiKey"}]},{"type":"text","value":" used to populate Algolia index programatically."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"indexName"}]},{"type":"text","value":" name of the Algolia index that will be populated after the indexing."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"accessToken"}]},{"type":"text","value":" to Storyblok space."}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-b18f6b{color:#56B6C2}.ct-a94918{color:#E5C07B}.ct-807a9a{color:#D19A66}.ct-390aab{color:#7F848E}.ct-9f61be{color:#98C379}.ct-4ff706{color:#E06C75}.ct-9d1bff{color:#61AFEF}.ct-8e5a41{color:#ABB2BF}.ct-a4fbf8{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"options","depth":2,"text":"Options","children":[{"id":"apikey","depth":3,"text":"apiKey"},{"id":"applicationid","depth":3,"text":"applicationId"},{"id":"globalindex","depth":3,"text":"globalIndex"},{"id":"lite","depth":3,"text":"lite"},{"id":"cache","depth":3,"text":"cache"},{"id":"usefetch","depth":3,"text":"useFetch"},{"id":"instantsearch","depth":3,"text":"instantSearch"},{"id":"instantsearchtheme","depth":3,"text":"instantSearch.theme"},{"id":"crawler","depth":3,"text":"crawler"},{"id":"recommend","depth":3,"text":"recommend"},{"id":"indexer","depth":3,"text":"indexer"}]}]}},"_type":"markdown","_id":"content:1.getting-started:2.configuration.md","_source":"content","_file":"1.getting-started/2.configuration.md","_extension":"md"},{"_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"}]