[{"_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'\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"}]}]}]}]},"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-b9e79c"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-b9e79c"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2369fc"},"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-b9e79c"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b9e79c"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fc9ecd"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"modules"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":": ["}]},{"type":"element","tag":"span","props":{"class":"ct-2369fc"},"children":[{"type":"text","value":"'@nuxtjs/algolia'"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"algolia"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"apiKey"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-fe7994"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fe7994"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"ALGOLIA_SEARCH_API_KEY"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"applicationId"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-fe7994"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fe7994"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"ALGOLIA_APPLICATION_ID"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"instantSearch"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"theme"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-2369fc"},"children":[{"type":"text","value":"'algolia'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-250980"},"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'\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-87b359"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"class":"ct-87b359"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2369fc"},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"class":"ct-87b359"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b9e79c"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe7994"},"children":[{"type":"text","value":"indexName"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-87b359"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2369fc"},"children":[{"type":"text","value":"'test_index'"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b9e79c"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe7994"},"children":[{"type":"text","value":"algolia"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-87b359"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fc9ecd"},"children":[{"type":"text","value":"useAlgoliaRef"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b9e79c"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"AisInstantSearch"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"AisSearchBox"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"AisHits"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-b9e79c"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2369fc"},"children":[{"type":"text","value":"'vue-instantsearch/vue3/es'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-87b359"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-87b359"},"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-250980"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"ais-instant-search"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-190fb2"},"children":[{"type":"text","value":":index-name"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2369fc"},"children":[{"type":"text","value":"\"indexName\""}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-190fb2"},"children":[{"type":"text","value":":search-client"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2369fc"},"children":[{"type":"text","value":"\"algolia\""}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"ais-search-box"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"ais-hits"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"ais-instant-search"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-55a6f5"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-250980"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-190fb2{color:#D19A66}.ct-87b359{color:#56B6C2}.ct-fe7994{color:#E5C07B}.ct-fc9ecd{color:#61AFEF}.ct-2369fc{color:#98C379}.ct-55a6f5{color:#E06C75}.ct-250980{color:#ABB2BF}.ct-b9e79c{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":"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 '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    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 '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    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":"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 '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    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-db8381"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-fa5385"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-db8381"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8cf833"},"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-db8381"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-db8381"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c39f"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-fa5385"},"children":[{"type":"text","value":"modules"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":": ["}]},{"type":"element","tag":"span","props":{"class":"ct-8cf833"},"children":[{"type":"text","value":"'@nuxtjs/algolia'"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-fa5385"},"children":[{"type":"text","value":"algolia"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-fa5385"},"children":[{"type":"text","value":"apiKey"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f0676"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f0676"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fa5385"},"children":[{"type":"text","value":"ALGOLIA_SEARCH_API_KEY"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-fa5385"},"children":[{"type":"text","value":"applicationId"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f0676"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f0676"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fa5385"},"children":[{"type":"text","value":"ALGOLIA_APPLICATION_ID"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-fa5385"},"children":[{"type":"text","value":"indexer"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-fa5385"},"children":[{"type":"text","value":"storyblok"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-fa5385"},"children":[{"type":"text","value":"secret"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f0676"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f0676"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fa5385"},"children":[{"type":"text","value":"INDEXER_SECRET"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-fa5385"},"children":[{"type":"text","value":"algoliaAdminApiKey"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f0676"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f0676"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fa5385"},"children":[{"type":"text","value":"ALGOLIA_ADMIN_KEY"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-fa5385"},"children":[{"type":"text","value":"indexName"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f0676"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f0676"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fa5385"},"children":[{"type":"text","value":"ALGOLIA_INDEX_NAME"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-fa5385"},"children":[{"type":"text","value":"accessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f0676"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6f0676"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fa5385"},"children":[{"type":"text","value":"STORYBLOK_ACCESS_TOKEN"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"      }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e1a9df"},"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-6f0676{color:#E5C07B}.ct-e9c39f{color:#61AFEF}.ct-8cf833{color:#98C379}.ct-fa5385{color:#E06C75}.ct-e1a9df{color:#ABB2BF}.ct-db8381{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"}]