+ Built with Nuxt UI • © {{ new Date().getFullYear() }} +
+ + + ++ See the configuration docs on how to enable it. +
+
+ Example of search debouncing using transformSearchClient to
+ optimize performance
+
+ This example applies a debounce to search requests. Searches are executed only after the user has stopped + typing for the specified time. +
+<script setup lang="ts">
+import type { SearchClient } from 'algoliasearch'
+import type { DocSearchProps } from '@docsearch/react'
+
+const debounceDelay = ref(500)
+
+const transformSearchClient: DocSearchProps['transformSearchClient'] = (searchClient) => {
+ return {
+ ...searchClient,
+ search: debounce(searchClient.search, debounceDelay.value)
+ } as SearchClient
+}
+
+function debounce(func: (...args: unknown[]) => unknown, wait = 100) {
+ let lastTimeout = null
+
+ return function (...args) {
+ const that = this
+ return new Promise((resolve, reject) => {
+ if (lastTimeout) {
+ clearTimeout(lastTimeout)
+ }
+ lastTimeout = setTimeout(() => {
+ lastTimeout = null
+ Promise.resolve(func.apply(that, args))
+ .then(resolve)
+ .catch(reject)
+ }, wait)
+ })
+ }
+}
+</script>200-300ms
+ + Balance between responsiveness and performance. +
+300-500ms
+ + Reduces requests to preserve battery life. +
++ Complete examples and configurations for the AlgoliaDocSearch component for documentation search +
++ This example uses only the required parameters from the configuration: +
+apiKeyapplicationIddocSearch.indexName+ Customize the search placeholder text: +
++ Set an initial query that is shown when DocSearch opens: +
++ Apply facet filters to limit search results: +
++ Customize Algolia search parameters: +
++ Example with all options configured: +
+| + Prop + | ++ Type + | ++ Description + | +
|---|---|---|
+ {{ prop.name }}
+ |
+ + {{ prop.type }} + | ++ {{ prop.description }} + | +
+ Explore other advanced DocSearch examples available in the navigation menu: +
++ {{ example.description }} +
+
+ Example of search results customization using the transformItems function
+
+ This example transforms result URLs to uppercase. Each result is modified before being displayed. +
+<script setup lang="ts">
+import type { DocSearchProps } from '@docsearch/react'
+
+const transformItems: DocSearchProps['transformItems'] = (items) => {
+ return items.map(item => ({
+ ...item,
+ url: item.url.toUpperCase()
+ }))
+}
+</script>
+
+<template>
+ <AlgoliaDocSearch :transform-items="transformItems" />
+</template>+ More complex example combining multiple transformations: +
+const transformItems: DocSearchProps['transformItems'] = (items) => {
+ return items
+ .map(item => ({
+ ...item,
+ // Normalize URL
+ url: item.url.replace(/^https?:\/\/[^/]+/, ''),
+ // Add badge for type
+ _highlightResult: {
+ ...item._highlightResult,
+ type: { value: 'documentation', matchLevel: 'none' }
+ }
+ }))
+ .filter(item => {
+ // Filter only relevant results
+ return item._rankingInfo && item._rankingInfo.userScore > 0
+ })
+ .sort((a, b) => {
+ // Sort by relevance
+ return (b._rankingInfo?.userScore || 0) - (a._rankingInfo?.userScore || 0)
+ })
+}+ Complete examples of all features and composables available in the @nuxtjs/algolia module +
+
+ const { search } = useAlgoliaInitIndex('test_index')
+ const result = await search('query')
+ // result.hits[0] has full types!
+
+ {{ result?.hits }}
- {{ searchForFacetValuesResult }}
- {{ recommendResult?.results }}
-
-