{"_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":"\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\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":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\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-04b4e5"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-a61e05"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-04b4e5"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-701505"},"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-04b4e5"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-04b4e5"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dc6c86"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a61e05"},"children":[{"type":"text","value":"modules"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":": ["}]},{"type":"element","tag":"span","props":{"class":"ct-701505"},"children":[{"type":"text","value":"'@nuxtjs/algolia'"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a61e05"},"children":[{"type":"text","value":"algolia"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a61e05"},"children":[{"type":"text","value":"apiKey"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-c70024"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c70024"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a61e05"},"children":[{"type":"text","value":"ALGOLIA_SEARCH_API_KEY"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a61e05"},"children":[{"type":"text","value":"applicationId"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-c70024"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c70024"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a61e05"},"children":[{"type":"text","value":"ALGOLIA_APPLICATION_ID"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a61e05"},"children":[{"type":"text","value":"instantSearch"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a61e05"},"children":[{"type":"text","value":"theme"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-701505"},"children":[{"type":"text","value":"'algolia'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"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":"\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-2aafe6"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-a61e05"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a61e05"},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"class":"ct-2aafe6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-701505"},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a61e05"},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"class":"ct-2aafe6"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-04b4e5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c70024"},"children":[{"type":"text","value":"indexName"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2aafe6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-701505"},"children":[{"type":"text","value":"'test_index'"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-04b4e5"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c70024"},"children":[{"type":"text","value":"algolia"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2aafe6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dc6c86"},"children":[{"type":"text","value":"useAlgoliaRef"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-04b4e5"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-a61e05"},"children":[{"type":"text","value":"AisInstantSearch"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a61e05"},"children":[{"type":"text","value":"AisSearchBox"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a61e05"},"children":[{"type":"text","value":"AisHits"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-04b4e5"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-701505"},"children":[{"type":"text","value":"'vue-instantsearch/vue3/es'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2aafe6"},"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":"\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-2bf873"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-a61e05"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-a61e05"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-a61e05"},"children":[{"type":"text","value":"ais-instant-search"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b5016a"},"children":[{"type":"text","value":":index-name"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-701505"},"children":[{"type":"text","value":"\"indexName\""}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b5016a"},"children":[{"type":"text","value":":search-client"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-701505"},"children":[{"type":"text","value":"\"algolia\""}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-a61e05"},"children":[{"type":"text","value":"ais-search-box"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-a61e05"},"children":[{"type":"text","value":"ais-hits"}]},{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2bf873"},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-b5016a{color:#D19A66}.ct-2aafe6{color:#56B6C2}.ct-c70024{color:#E5C07B}.ct-dc6c86{color:#61AFEF}.ct-701505{color:#98C379}.ct-a61e05{color:#E06C75}.ct-2bf873{color:#ABB2BF}.ct-04b4e5{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"}