This module exposes composables that are auto-imported by Nuxt 3.
For more details check out the official documentation of initializing algolia client here
useAlgoliaSearch
Use this composable to search the index by certain query and optional request options
<script setup>const { result, search } = useAlgoliaSearch('test_index') // pass your index name as paramonMounted(async () => { await search({ query: 'Samsung' });})</script>
This composable works also for SSR applications and requests like this:
<script setup lang="ts">const { result, search } = useAlgoliaSearch('test_index') // pass your index name as paramconst { data } = await useAsyncData('ssr-search-results', () => search({ query: 'Samsung' }))</script>
result
will contain a value of a search method. It is reactive computed property that will be populated when a search method will fulfill. This result will have a form described heresearch
method is used to fetch the results by the index and populates result
reactive property. This method requires a parameter query
and accepts an optional parameter of requestOptions
that you can check out hereFor more details check out the official documentation of this method here
useAsyncAlgoliaSearch
Async wrapper around useAlgoliaSearch
composable that decreases the number of steps needed to use Algolia with useAsyncData
while maintaining the same functionality. The response will have a form described here and will be wrapped around useAsyncData
so you will have access to data
, error
, and other properties.
<script setup lang="ts">const { data, error } = await useAsyncAlgoliaSearch({ indexName: 'test_index', query: 'Samsung' })</script><template> <div>{{ data.value.hits }}</div></template>
This composable accepts an object as a param with following properties:
indexName
- the name of you index in Algolia dashboard. For more details about initializing index check out the official documentation here. If you passed a global index in your module configuration, this property can be skipped.query
- a keyword, sentence, or text that you want to search the index with.key
- if you need multiple asyncAlgoliaSearch calls in a single page, add a unique key to get passed to the useAsyncData underneath, so new calls won't overwrite old data.requestOptions
optional object with options for the request like filters. You can check more about is hereIf you want to fetch search results filtered by some facet values you can do so like following:
const { result, search } = useAlgoliaSearch("INDEX_NAME");await search({ query: input_string, requestOptions: {facetFilters: ["tags:happy"]} });
useAlgoliaFacetedSearch
Use this composable to search using facet values like category
, phone
.
<script setup>const { result, search } = useAlgoliaFacetedSearch('test_index')onMounted(async () => { const facet = { name: 'category', query: 'phone' } await search({ facet })})</script>
result
will contain a value of a search method. It is reactive computed property that will be populated when a search method will fulfill. This result will have a form described heresearch
method is used to fetch the results by the certain facet value pairs like name and query, and populates result
reactive property. This method requries a parameter for facet
and accepts an optional parameter of requestOptions
that you can check out hereFor more details about using this search method check out the official documentation here
useAlgoliaRecommend
Use this composable to get the recommendations matching certain criteria optional request options.
recommend
property to true
in algolia configuration in nuxt.config.ts
.<script setup>const { result, get } = useAlgoliaRecommend()onMounted(async () => { await get({ queries: [{ indexName: 'test_index', model: 'related-products', objectID: 'dca44dd5-aea6-4553-a3af-fcbda981a2ef' }] });})</script>
This composable returns the following:
result
will contain a value of a get method. It is reactive computed property that will be populated when a get method will fulfill. This result will have a form described hereget
method is used to get the recommendations based on the criteria described here and an optional parameter of requestOptions
that you can check out hereThis composable also accepts an optional key parameter:
key
- if you need multiple useAlgoliaRecommend calls, add a unique key to get passed to the userState('recommend-result') underneath, so new calls won't overwrite old data.For more details check out the official documentation of this method here
useAlgoliaRef
By calling this composable you have access to algoliasearch
instance anywhere in your app
<script setup>const algolia = useAlgoliaRef()</script>
useAlgoliaInitIndex
Use this composable to initialize index you would like to search through. It accepts an index name as a parameter
<script setup>const algoliaIndex = useAlgoliaInitIndex('test')console.log(algoliaIndex.appId)</script>
For more details about initializing index check out the official documentation here