[{"_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":"text","value":". Check out setup docs "},{"type":"element","tag":"a","props":{"href":"/setup#instantSearch"},"children":[{"type":"text","value":"here"}]}]}]},{"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/index.js'\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/index.js'\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"}]}]}]}]},"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-47cb2a"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-47cb2a"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2feb2a"},"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-47cb2a"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-47cb2a"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa9e19"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"modules"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":": ["}]},{"type":"element","tag":"span","props":{"class":"ct-2feb2a"},"children":[{"type":"text","value":"'@nuxtjs/algolia'"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"algolia"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"apiKey"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-c255e8"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c255e8"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"ALGOLIA_SEARCH_API_KEY"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"applicationId"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-c255e8"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c255e8"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"ALGOLIA_APPLICATION_ID"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"instantSearch"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"theme"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-2feb2a"},"children":[{"type":"text","value":"'algolia'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"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":"text","value":". Check out setup docs "},{"type":"element","tag":"a","props":{"href":"/setup#instantSearch"},"children":[{"type":"text","value":"here"}]}]}]},{"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/index.js'\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-fe566f"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"class":"ct-fe566f"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2feb2a"},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"class":"ct-fe566f"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47cb2a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c255e8"},"children":[{"type":"text","value":"indexName"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe566f"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2feb2a"},"children":[{"type":"text","value":"'test_index'"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47cb2a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c255e8"},"children":[{"type":"text","value":"algolia"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe566f"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa9e19"},"children":[{"type":"text","value":"useAlgoliaRef"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47cb2a"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"AisInstantSearch"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"AisSearchBox"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"AisHits"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-47cb2a"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2feb2a"},"children":[{"type":"text","value":"'vue-instantsearch/vue3/es/index.js'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe566f"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-fe566f"},"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-7ad3a5"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"ais-instant-search"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7e8b80"},"children":[{"type":"text","value":":index-name"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2feb2a"},"children":[{"type":"text","value":"\"indexName\""}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7e8b80"},"children":[{"type":"text","value":":search-client"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2feb2a"},"children":[{"type":"text","value":"\"algolia\""}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"ais-search-box"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"ais-hits"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"ais-instant-search"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-7bbd1e"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-7ad3a5"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-7e8b80{color:#D19A66}.ct-fe566f{color:#56B6C2}.ct-c255e8{color:#E5C07B}.ct-aa9e19{color:#61AFEF}.ct-2feb2a{color:#98C379}.ct-7bbd1e{color:#E06C75}.ct-7ad3a5{color:#ABB2BF}.ct-47cb2a{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"using-with-vue-instantsearch-components","depth":2,"text":"Using with Vue-Instantsearch components"}]}},"_type":"markdown","_id":"content:2.advanced:1.vue-instantsearch.md","_source":"content","_file":"2.advanced/1.vue-instantsearch.md","_extension":"md"},{"_path":"/advanced/er","_draft":false,"_partial":false,"_empty":false,"title":"Indexer","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"This feature works only for Server Side Rendered (SSR) applications. If you are using Statically Generated Site, please use Serverless functions instead."}]}]},{"type":"element","tag":"h2","props":{"id":"storyblok"},"children":[{"type":"text","value":"Storyblok"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are interested in building a Nuxt 3 application with Algolia search that is powered by Storyblok CMS (with automatic Algolia search indexing) you can check out the article for Storyblok about it "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/tp/using-storyblok-algolia-in-nuxt-3","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]},{"type":"text","value":". It explains how to build the indexer from scratch. You can also use the built in indexer that does the same thing."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to enable it, first add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"indexer"}]},{"type":"text","value":" configuration option to module configuration:"}]},{"type":"element","tag":"code","props":{"code":"import { defineNuxtConfig } from 'nuxt'\n\nexport default defineNuxtConfig({\n  modules: ['@nuxtjs/algolia'],\n  algolia: {\n    apiKey: process.env.ALGOLIA_SEARCH_API_KEY,\n    applicationId: process.env.ALGOLIA_APPLICATION_ID,\n    indexer: {\n      storyblok: {\n        secret: process.env.INDEXER_SECRET,\n        algoliaAdminApiKey: process.env.ALGOLIA_ADMIN_KEY,\n        indexName: process.env.ALGOLIA_INDEX_NAME,\n        accessToken: process.env.STORYBLOK_ACCESS_TOKEN\n      }\n    }\n})\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { defineNuxtConfig } from 'nuxt'\n\nexport default defineNuxtConfig({\n  modules: ['@nuxtjs/algolia'],\n  algolia: {\n    apiKey: process.env.ALGOLIA_SEARCH_API_KEY,\n    applicationId: process.env.ALGOLIA_APPLICATION_ID,\n    indexer: {\n      storyblok: {\n        secret: process.env.INDEXER_SECRET,\n        algoliaAdminApiKey: process.env.ALGOLIA_ADMIN_KEY,\n        indexName: process.env.ALGOLIA_INDEX_NAME,\n        accessToken: process.env.STORYBLOK_ACCESS_TOKEN\n      }\n    }\n})\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It will automatically register a new server middleware that you can access manually or by using a webhook to trigger automatic indexing after content change. Remember to create appriopriate "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secret"}]},{"type":"text","value":" property and add it to the webhook configuration so that the indexing could be triggered correctly. You can test if it works correctly by accessing a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/api/indexer?secret=<YOUR_SECRET>"}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"This feature works only for Server Side Rendered (SSR) applications. If you are using Statically Generated Site, please use Serverless functions instead."}]}]},{"type":"element","tag":"h2","props":{"id":"storyblok"},"children":[{"type":"text","value":"Storyblok"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are interested in building a Nuxt 3 application with Algolia search that is powered by Storyblok CMS (with automatic Algolia search indexing) you can check out the article for Storyblok about it "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/tp/using-storyblok-algolia-in-nuxt-3","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]},{"type":"text","value":". It explains how to build the indexer from scratch. You can also use the built in indexer that does the same thing."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to enable it, first add "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"indexer"}]},{"type":"text","value":" configuration option to module configuration:"}]},{"type":"element","tag":"code","props":{"code":"import { defineNuxtConfig } from 'nuxt'\n\nexport default defineNuxtConfig({\n  modules: ['@nuxtjs/algolia'],\n  algolia: {\n    apiKey: process.env.ALGOLIA_SEARCH_API_KEY,\n    applicationId: process.env.ALGOLIA_APPLICATION_ID,\n    indexer: {\n      storyblok: {\n        secret: process.env.INDEXER_SECRET,\n        algoliaAdminApiKey: process.env.ALGOLIA_ADMIN_KEY,\n        indexName: process.env.ALGOLIA_INDEX_NAME,\n        accessToken: process.env.STORYBLOK_ACCESS_TOKEN\n      }\n    }\n})\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e1c24"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-a8489f"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-9e1c24"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d2a60d"},"children":[{"type":"text","value":"'nuxt'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e1c24"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9e1c24"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0a14aa"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-a8489f"},"children":[{"type":"text","value":"modules"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":": ["}]},{"type":"element","tag":"span","props":{"class":"ct-d2a60d"},"children":[{"type":"text","value":"'@nuxtjs/algolia'"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-a8489f"},"children":[{"type":"text","value":"algolia"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a8489f"},"children":[{"type":"text","value":"apiKey"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-5589e3"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5589e3"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a8489f"},"children":[{"type":"text","value":"ALGOLIA_SEARCH_API_KEY"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a8489f"},"children":[{"type":"text","value":"applicationId"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-5589e3"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5589e3"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a8489f"},"children":[{"type":"text","value":"ALGOLIA_APPLICATION_ID"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a8489f"},"children":[{"type":"text","value":"indexer"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-a8489f"},"children":[{"type":"text","value":"storyblok"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-a8489f"},"children":[{"type":"text","value":"secret"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-5589e3"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5589e3"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a8489f"},"children":[{"type":"text","value":"INDEXER_SECRET"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-a8489f"},"children":[{"type":"text","value":"algoliaAdminApiKey"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-5589e3"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5589e3"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a8489f"},"children":[{"type":"text","value":"ALGOLIA_ADMIN_KEY"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-a8489f"},"children":[{"type":"text","value":"indexName"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-5589e3"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5589e3"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a8489f"},"children":[{"type":"text","value":"ALGOLIA_INDEX_NAME"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-a8489f"},"children":[{"type":"text","value":"accessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-5589e3"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-5589e3"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a8489f"},"children":[{"type":"text","value":"STORYBLOK_ACCESS_TOKEN"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"      }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e164ad"},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It will automatically register a new server middleware that you can access manually or by using a webhook to trigger automatic indexing after content change. Remember to create appriopriate "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secret"}]},{"type":"text","value":" property and add it to the webhook configuration so that the indexing could be triggered correctly. You can test if it works correctly by accessing a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/api/indexer?secret=<YOUR_SECRET>"}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-5589e3{color:#E5C07B}.ct-0a14aa{color:#61AFEF}.ct-d2a60d{color:#98C379}.ct-a8489f{color:#E06C75}.ct-e164ad{color:#ABB2BF}.ct-9e1c24{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"storyblok","depth":2,"text":"Storyblok"}]}},"_type":"markdown","_id":"content:2.advanced:3.indexer.md","_source":"content","_file":"2.advanced/3.indexer.md","_extension":"md"}]