From e8927f77ce95133d66dfe9e26d45247cdff9b952 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lehoczky=20Zolt=C3=A1n?= <ifjlehoczkyzoltan@gmail.com>
Date: Thu, 28 Sep 2023 20:32:38 +0200
Subject: [PATCH 1/4] feat(docsearch): allow to set component props
 individually and inherit undefined ones from the config

---
 src/module.ts                               |  36 +---
 src/runtime/components/AlgoliaDocSearch.vue | 214 +++++++++++++-------
 src/types.ts                                |  76 ++++---
 3 files changed, 172 insertions(+), 154 deletions(-)

diff --git a/src/module.ts b/src/module.ts
index 3a6df2b..9e5a5cd 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -3,7 +3,7 @@ import { fileURLToPath } from 'url'
 import { defineNuxtModule, addPlugin, addComponentsDir, addServerHandler, addImportsDir, useLogger, isNuxt2 } from '@nuxt/kit'
 import { defu } from 'defu'
 import { createPageGenerateHook, createGenerateDoneHook, CrawlerPage, CrawlerHooks, CrawlerOptions } from './hooks'
-import type { DocSearchOptions } from './types'
+import { InstantSearchThemes, type ModuleBaseOptions } from './types'
 
 const MODULE_NAME = '@nuxtjs/algolia'
 const logger = useLogger(MODULE_NAME)
@@ -12,33 +12,6 @@ function throwError (message: string) {
   throw new Error(`\`[${MODULE_NAME}]\` ${message}`)
 }
 
-enum InstantSearchThemes {
-  'reset',
-  'algolia',
-  'satellite',
-}
-
-interface Indexer {
-  storyblok: {
-    accessToken: string,
-    algoliaAdminApiKey: string,
-    indexName: string,
-    secret: string;
-  }
-}
-
-interface ModuleBaseOptions {
-  applicationId: string;
-  apiKey: string;
-  globalIndex: string;
-  lite?: boolean;
-  cache?: boolean;
-  instantSearch?: boolean | { theme: keyof typeof InstantSearchThemes };
-  recommend?: boolean;
-  docSearch?: Partial<DocSearchOptions>;
-  indexer?: Indexer;
-}
-
 export interface ModuleOptions extends ModuleBaseOptions {
   crawler?: CrawlerOptions
 };
@@ -120,12 +93,6 @@ export default defineNuxtModule<ModuleOptions>({
     }
 
     if (Object.keys(options.docSearch!).length) {
-      const docSearchConfig = options.docSearch
-
-      // Defaults apiKey and applicationId to global Algolia keys if not specified by the user
-      if (!docSearchConfig!.apiKey && options.apiKey) { docSearchConfig!.apiKey = options.apiKey }
-      if (!docSearchConfig!.applicationId && options.applicationId) { docSearchConfig!.applicationId = options.applicationId }
-
       addComponentsDir({
         path: resolve(runtimeDir, 'components'),
         pathPrefix: false,
@@ -152,6 +119,7 @@ export default defineNuxtModule<ModuleOptions>({
     // Nuxt 3
     // @ts-expect-error TODO: Workaround for rc.14 only
     nuxt.options.runtimeConfig.public = nuxt.options.runtimeConfig.public || {}
+    // @ts-ignore
     nuxt.options.runtimeConfig.public.algolia = defu(nuxt.options.runtimeConfig.algolia, {
       apiKey: options.apiKey,
       applicationId: options.applicationId,
diff --git a/src/runtime/components/AlgoliaDocSearch.vue b/src/runtime/components/AlgoliaDocSearch.vue
index d7bc87d..2ff9730 100644
--- a/src/runtime/components/AlgoliaDocSearch.vue
+++ b/src/runtime/components/AlgoliaDocSearch.vue
@@ -7,39 +7,113 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
 import { withoutTrailingSlash } from 'ufo'
-import type { DocSearchOptions } from '../../types'
+import { DocSearchProps, type docsearch as docsearchFunc } from 'docsearch'
+import type { DocSearchTranslations } from '@docsearch/react'
+import type { HitComponentFunc, ModuleBaseOptions, SearchOptions } from '../../types'
 // @ts-ignore - These are Nuxt3 aliases
-import { useRuntimeConfig, useRoute, useRouter, onMounted, watch, computed } from '#imports'
+import { useRuntimeConfig, useRoute, useRouter, watch, onMounted, reactive } from '#imports'
 
 const route = useRoute()
-
 const router = useRouter()
 
 const props = defineProps({
-  options: {
-    type: [Object, undefined] as PropType<DocSearchOptions | undefined>,
-    required: false,
+  applicationId: {
+    type: String,
+    default: () => (useRuntimeConfig().public.algolia as ModuleBaseOptions)?.applicationId
+  },
+  apiKey: {
+    type: String,
+    default: () => (useRuntimeConfig().public.algolia as ModuleBaseOptions)?.apiKey
+  },
+  indexName: {
+    type: String,
+    default: () => (useRuntimeConfig().public.algolia as ModuleBaseOptions)?.docSearch?.indexName
+  },
+  placeholder: {
+    type: String,
+    default: () => (useRuntimeConfig().public.algolia as ModuleBaseOptions)?.docSearch?.placeholder
+  },
+  searchParameters: {
+    type: Object as PropType<SearchOptions>,
+    default: () => (useRuntimeConfig().public.algolia as ModuleBaseOptions)?.docSearch?.searchParameters
+  },
+  disableUserPersonalization: {
+    type: Boolean,
+    default: () => (useRuntimeConfig().public.algolia as ModuleBaseOptions)?.docSearch?.disableUserPersonalization
+  },
+  initialQuery: {
+    type: String,
+    default: () => (useRuntimeConfig().public.algolia as ModuleBaseOptions)?.docSearch?.initialQuery
+  },
+  translations: {
+    type: Object as PropType<DocSearchTranslations>,
+    default: () => (useRuntimeConfig().public.algolia as ModuleBaseOptions)?.docSearch?.translations
+  },
+  facetFilters: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: () => (useRuntimeConfig().public.algolia as ModuleBaseOptions)?.docSearch?.facetFilters ?? []
+  },
+  langAttribute: {
+    type: String,
+    default: () => (useRuntimeConfig().public.algolia as ModuleBaseOptions)?.docSearch?.langAttribute ?? 'language'
+  },
+  // TODO: Maybe bind this with @nuxt/i18n ?
+  lang: {
+    type: String,
+    default: () => (useRuntimeConfig().public.algolia as ModuleBaseOptions)?.docSearch?.lang ?? 'en'
+  },
+  /**
+   * Receives the items from the search response, and is called before displaying them.
+   * Should return a new array with the same shape as the original array.
+   * Useful for mapping over the items to transform, and remove or reorder them.
+   *
+   * {@link https://docsearch.algolia.com/docs/api#transformitems}
+   */
+  transformItems: {
+    type: Function as PropType<DocSearchProps['transformItems'] | undefined>,
+    default: undefined
+  },
+  /**
+   * The component to display each item.
+   *
+   * {@link https://docsearch.algolia.com/docs/api#hitcomponent}
+   * {@link https://github.com/algolia/docsearch/blob/next/packages/docsearch-react/src/Hit.tsx}
+   */
+  hitComponent: {
+    type: [Function, undefined] as PropType<HitComponentFunc | undefined>,
+    default: undefined
+  },
+  /**
+   * Useful for transforming the Algolia Search Client, for example to debounce search queries.
+   *
+   * {@link https://docsearch.algolia.com/docs/api#transformsearchclient}
+   */
+  transformSearchClient: {
+    type: [Function, undefined] as PropType<DocSearchProps['transformSearchClient'] | undefined>,
+    default: undefined
+  },
+  /**
+   * An implementation of Algolia Autocomplete’s Navigator API to redirect the user when opening a link.
+   *
+   * {@link https://docsearch.algolia.com/docs/api#navigator}
+   */
+  navigator: {
+    type: [Object, undefined] as PropType<DocSearchProps['navigator'] | undefined>,
+    default: undefined
+  },
+  /**
+   * Function to return the URL of your documentation repository.
+   * When provided, an informative message wrapped with your link will be displayed on no results searches.
+   * The default text can be changed using the translations property.
+   *
+   * {@link https://docsearch.algolia.com/docs/api#getmissingresultsurl}
+   */
+  getMissingResultsUrl: {
+    type: [Function, undefined] as PropType<DocSearchProps['getMissingResultsUrl'] | undefined>,
     default: undefined
   }
 })
 
-/**
- * Try to grab options from runtimeConfig.
- *
- * If not found, fallback on props.
- */
-const options = computed<DocSearchOptions>(
-  () => {
-    if (props.options) { return props.options }
-
-    const { algolia } = useRuntimeConfig().public
-
-    if (algolia && algolia.docSearch) { return algolia.docSearch }
-
-    return {}
-  }
-)
-
 /**
  * Check if event is special click to avoid closing the DocSearch too soon.
  */
@@ -70,26 +144,23 @@ const withoutBaseUrl = (url: string) => {
   return url
 }
 
-/**
- * Initialize the DocSearch instance.
- * @param userOptions
- */
-const initialize = async (userOptions: DocSearchOptions) => {
-  // Import @docsearch at runtime
-  const docsearch = await Promise.all([
+const importDocSearchAtRuntime = async (): Promise<typeof docsearchFunc> => {
+  const [docsearch] = await Promise.all([
     // @ts-ignore
     import(/* webpackChunkName: "docsearch" */ '@docsearch/js'),
     // @ts-ignore
     process.client && import(/* webpackChunkName: "docsearch" */ '@docsearch/css')
-  ]).then(([docsearch]) => docsearch.default)
+  ])
 
-  // TODO: Maybe bind this with @nuxt/i18n ?
-  // Resolve lang
-  const lang = userOptions?.lang || 'en'
-  // Generate lang prefix
-  const langPrefix = `${userOptions.langAttribute || 'language'}:${lang}`
-  // Get facet filters
-  const userFacetFilters = userOptions.facetFilters || []
+  return docsearch.default
+}
+
+/**
+ * Initialize the DocSearch instance.
+ */
+const initialize = async () => {
+  const docsearch = await importDocSearchAtRuntime()
+  const langPrefix = `${props.langAttribute}:${props.lang}`
 
   // Create DocSearch instance
   docsearch({
@@ -97,27 +168,18 @@ const initialize = async (userOptions: DocSearchOptions) => {
      * Local implementation of this DocSearch box uses a local element with an `docsearch` id.
      */
     container: '#docsearch',
-    appId: userOptions.applicationId,
-    apiKey: userOptions.apiKey,
-    indexName: userOptions.indexName,
+    appId: props.applicationId,
+    apiKey: props.apiKey,
+    indexName: props.indexName,
     searchParameters: {
-      ...(
-        // Prefix facetFilters with langAttribute, otherwise use raw facetFilters
-        (!lang)
-          ? {
-              facetFilters: userFacetFilters
-            }
-          : {
-              facetFilters: [langPrefix].concat(userFacetFilters)
-            }
-      ),
-      ...userOptions.searchParameters
+      facetFilters: [langPrefix].concat(props.facetFilters),
+      ...props.searchParameters
     },
     /**
-     * Transform items into relative URL format (compatibiltiy with Vue Router).
+     * Transform items into relative URL format (compatibility with Vue Router).
      */
-    transformItems: userOptions.transformItems
-      ? userOptions.transformItems
+    transformItems: props.transformItems
+      ? props.transformItems
       : (items) => {
           return items.map((item) => {
             return {
@@ -126,8 +188,8 @@ const initialize = async (userOptions: DocSearchOptions) => {
             }
           })
         },
-    navigator: userOptions.navigator
-      ? userOptions.navigator
+    navigator: props.navigator
+      ? props.navigator
       : {
           navigate: ({ itemUrl }) => {
             const { pathname: hitPathname } = new URL(window.location.origin + itemUrl)
@@ -140,8 +202,8 @@ const initialize = async (userOptions: DocSearchOptions) => {
             }
           }
         },
-    hitComponent: userOptions.hitComponent
-      ? userOptions.hitComponent
+    hitComponent: props.hitComponent
+      ? props.hitComponent
       : ({ hit, children }) => {
           return {
             type: 'a',
@@ -167,28 +229,24 @@ const initialize = async (userOptions: DocSearchOptions) => {
                 router.push(withoutBaseUrl(hit.url))
               }
             }
-          }
-        },
-    // Spread user options, except the ones that are already used in the instance.
-    ...Object.entries(userOptions)
-      // Skip already used keys
-      .filter(
-        ([key]) => !['applicationId', 'apiKey', 'indexName', 'transformItems', 'navigator', 'hitComponent', 'facetFilters', 'langAttribute', 'lang'].includes(key)
-      )
-      // Recompose options
-      .reduce(
-        (acc, [key, value]) => {
-          acc[key] = value
-          return acc
+          } as any
         },
-        {}
-      )
+    disableUserPersonalization: props.disableUserPersonalization,
+    getMissingResultsUrl: props.getMissingResultsUrl,
+    initialQuery: props.initialQuery,
+    placeholder: props.placeholder,
+    translations: props.translations,
+    transformSearchClient: props.transformSearchClient
   })
 }
 
-// Initialize when mounted.
-onMounted(() => initialize(options.value))
+onMounted(async () => {
+  await initialize()
+})
 
-// Watch options and restart the instance if needed.
-watch(options, (n: any) => initialize(n))
+if (process.client) {
+  watch(props, async () => {
+    await initialize()
+  })
+}
 </script>
diff --git a/src/types.ts b/src/types.ts
index d907e99..5671eb1 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,9 +1,7 @@
 
-import { AutocompleteOptions, AutocompleteState } from '@algolia/autocomplete-core'
 import { DocSearchTranslations } from '@docsearch/react'
-import { DocSearchHit, InternalDocSearchHit, StoredDocSearchHit } from '@docsearch/react/dist/esm/types'
+import { InternalDocSearchHit, StoredDocSearchHit } from '@docsearch/react/dist/esm/types'
 import type { SearchIndex } from 'algoliasearch'
-import { SearchClient } from 'algoliasearch/lite'
 
 export interface AlgoliaIndices {}
 
@@ -936,31 +934,6 @@ export interface DocSearchOptions {
    * {@link https://docsearch.algolia.com/docs/api#searchparameters}
    */
   searchParameters?: SearchOptions;
-  /**
-   * Receives the items from the search response, and is called before displaying them.
-   * Should return a new array with the same shape as the original array.
-   * Useful for mapping over the items to transform, and remove or reorder them.
-   *
-   * {@link https://docsearch.algolia.com/docs/api#transformitems}
-   */
-  transformItems?: (items: DocSearchHit[]) => DocSearchHit[];
-  /**
-   * The component to display each item.
-   *
-   * {@link https://docsearch.algolia.com/docs/api#hitcomponent}
-   * {@link https://github.com/algolia/docsearch/blob/next/packages/docsearch-react/src/Hit.tsx}
-   */
-  hitComponent?: (props: {
-    hit: InternalDocSearchHit | StoredDocSearchHit;
-    // Avoid importing React types there
-    children: any; // React.ReactNode;
-  }) => JSX.Element;
-  /**
-   * Useful for transforming the Algolia Search Client, for example to debounce search queries.
-   *
-   * {@link https://docsearch.algolia.com/docs/api#transformsearchclient}
-   */
-  transformSearchClient?: (searchClient: SearchClient) => SearchClient;
   /**
    * Disable saving recent searches and favorites to the local storage.
    *
@@ -972,25 +945,11 @@ export interface DocSearchOptions {
    * {@link https://docsearch.algolia.com/docs/api#initialquery}
    */
   initialQuery?: string;
-  /**
-   * An implementation of Algolia Autocomplete’s Navigator API to redirect the user when opening a link.
-   *
-   * {@link https://docsearch.algolia.com/docs/api#navigator}
-   */
-  navigator?: AutocompleteOptions<InternalDocSearchHit>['navigator'];
   /**
    * Allow translations of any raw text and aria-labels present in the DocSearch button or modal components.
    * {@link https://docsearch.algolia.com/docs/api#translations}
    */
   translations?: DocSearchTranslations;
-  /**
-   * Function to return the URL of your documentation repository.
-   * When provided, an informative message wrapped with your link will be displayed on no results searches.
-   * The default text can be changed using the translations property.
-   *
-   * {@link https://docsearch.algolia.com/docs/api#getmissingresultsurl}
-   */
-  getMissingResultsUrl?: (opts: { query: string }) => string;
   /**
    * The facetFilters to use in your search parameters.
    * This is local shorthand and provided by @nuxtjs/algolia.
@@ -1011,3 +970,36 @@ export interface DocSearchOptions {
    */
   lang?: string
 }
+
+export type HitComponentFunc = (props: {
+  hit: InternalDocSearchHit | StoredDocSearchHit;
+  // Avoid importing React types there
+  children: any; // React.ReactNode;
+}) => JSX.Element
+
+export enum InstantSearchThemes {
+  'reset',
+  'algolia',
+  'satellite',
+}
+
+interface Indexer {
+  storyblok: {
+    accessToken: string,
+    algoliaAdminApiKey: string,
+    indexName: string,
+    secret: string;
+  }
+}
+
+export interface ModuleBaseOptions {
+  applicationId: string;
+  apiKey: string;
+  globalIndex: string;
+  lite?: boolean;
+  cache?: boolean;
+  instantSearch?: boolean | { theme: keyof typeof InstantSearchThemes };
+  recommend?: boolean;
+  docSearch?: Partial<DocSearchOptions>;
+  indexer?: Indexer;
+}

From dd06cd7c248b1e6e6e560da699f8557873bc6040 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lehoczky=20Zolt=C3=A1n?= <ifjlehoczkyzoltan@gmail.com>
Date: Tue, 3 Oct 2023 21:53:25 +0200
Subject: [PATCH 2/4] chore: add multiple examples to the playground for
 DocSearch

---
 .eslintrc                                     | 10 ++++-
 playground/nuxt.config.ts                     | 10 +++--
 playground/pages/docsearch.vue                | 39 +++++++++++++++++++
 .../pages/docsearch/debounce-search.vue       | 38 ++++++++++++++++++
 playground/pages/docsearch/index.vue          | 14 +++++++
 .../pages/docsearch/transform-items.vue       | 20 ++++++++++
 playground/pages/index.vue                    | 16 +++-----
 src/runtime/components/AlgoliaDocSearch.vue   |  2 +-
 8 files changed, 133 insertions(+), 16 deletions(-)
 create mode 100644 playground/pages/docsearch.vue
 create mode 100644 playground/pages/docsearch/debounce-search.vue
 create mode 100644 playground/pages/docsearch/index.vue
 create mode 100644 playground/pages/docsearch/transform-items.vue

diff --git a/.eslintrc b/.eslintrc
index be379f8..10c3f10 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -6,5 +6,13 @@
     "@typescript-eslint/no-unused-vars": [
       "off"
     ]
-  }
+  },
+  "overrides": [
+    {
+      "files": ["playground/pages/**"],
+      "rules": {
+        "vue/multi-word-component-names": "off"
+      }
+    }
+  ]
 }
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index a496df7..b62ef6b 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -15,13 +15,15 @@ export default defineNuxtConfig({
     }
   },
   algolia: {
-    // apiKey: process.env.ALGOLIA_API_KEY,
-    // applicationId: process.env.ALGOLIA_APPLICATION_ID,
+    apiKey: process.env.ALGOLIA_API_KEY ?? '599cec31baffa4868cae4e79f180729b',
+    applicationId: process.env.ALGOLIA_APPLICATION_ID ?? 'R2IYF7ETH7',
     lite: false, // by default set to 'true'
     cache: true,
     docSearch: {
-      indexName: process.env.ALGOLIA_DOCSEARCH_INDEX_NAME ?? 'indexName',
-      facetFilters: process.env.ALGOLIA_DOCSEARCH_FACET_FILTERS ?? ''
+      indexName: process.env.ALGOLIA_DOCSEARCH_INDEX_NAME ?? 'docsearch',
+      searchParameters: {
+        facetFilters: []
+      }
     },
     instantSearch: {
       theme: 'algolia'
diff --git a/playground/pages/docsearch.vue b/playground/pages/docsearch.vue
new file mode 100644
index 0000000..62f36e9
--- /dev/null
+++ b/playground/pages/docsearch.vue
@@ -0,0 +1,39 @@
+<template>
+  <main>
+    <div v-if="isDocsearchEnabled">
+      <h1>DocSearch plugin</h1>
+
+      <div>
+        <NuxtLink to="/">
+          Home
+        </NuxtLink>
+      </div>
+      <div style="display: flex; gap: 0.5rem;margin-bottom: 3rem;">
+        <NuxtLink to="/docsearch">
+          Basic example
+        </NuxtLink>
+        <NuxtLink to="/docsearch/transform-items">
+          Transforming items
+        </NuxtLink>
+        <NuxtLink to="/docsearch/debounce-search">
+          Debouncing search
+        </NuxtLink>
+      </div>
+
+      <div>
+        <NuxtPage />
+      </div>
+    </div>
+
+    <div v-else>
+      DocSearch plugin is currently disabled.
+
+      See the <a href="https://algolia.nuxtjs.org/advanced/docsearch#configuration">configuration docs</a> on how to enable it.
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+const { algolia: { docSearch } } = useRuntimeConfig().public
+const isDocsearchEnabled = computed(() => Boolean(docSearch))
+</script>
diff --git a/playground/pages/docsearch/debounce-search.vue b/playground/pages/docsearch/debounce-search.vue
new file mode 100644
index 0000000..b575fa0
--- /dev/null
+++ b/playground/pages/docsearch/debounce-search.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <AlgoliaDocSearch :transform-search-client="transformSearchClient" />
+
+    <div style="margin-top: 2rem;">
+      This example uses a custom `SearchClient` which debounces the search requests.
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SearchClient } from 'algoliasearch'
+import { DocSearchProps } from 'docsearch'
+
+const transformSearchClient: DocSearchProps['transformSearchClient'] = (searchClient) => {
+  return {
+    ...searchClient,
+    search: debounce(searchClient.search, 5000)
+  } 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>
diff --git a/playground/pages/docsearch/index.vue b/playground/pages/docsearch/index.vue
new file mode 100644
index 0000000..f46cf5e
--- /dev/null
+++ b/playground/pages/docsearch/index.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <AlgoliaDocSearch />
+
+    <div style="margin-top: 2rem;">
+      This basic example uses only the required params from `nuxt.config.ts`:
+      <ul>
+        <li>apiKey</li>
+        <li>applicationId</li>
+        <li>docSearch.indexName</li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/playground/pages/docsearch/transform-items.vue b/playground/pages/docsearch/transform-items.vue
new file mode 100644
index 0000000..18d1edf
--- /dev/null
+++ b/playground/pages/docsearch/transform-items.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <AlgoliaDocSearch :transform-items="transformItems" />
+
+    <div style="margin-top: 2rem;">
+      This example uses a custom function for transforming search results. The URL of each item is now in uppercase, which is a bit silly, but this is just an example.
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DocSearchProps } from 'docsearch'
+
+const transformItems: DocSearchProps['transformItems'] = (items) => {
+  return items.map(item => ({
+    ...item,
+    url: item.url.toUpperCase()
+  }))
+}
+</script>
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index f043087..751f524 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <main>
     <pre> {{ result?.hits }}</pre>
     <pre>{{ searchForFacetValuesResult }}</pre>
     <div>
@@ -11,23 +11,19 @@
     </div>
     <pre>{{ recommendResult?.results }}</pre>
 
-    <div v-if="docSearch">
-      <h3>DocSearch plugin</h3>
-      <AlgoliaDocSearch :options="docSearch" />
-    </div>
+    <NuxtLink to="/docsearch">
+      Docsearch
+    </NuxtLink>
+    <br>
     <NuxtLink to="/other-page">
       Other page
     </NuxtLink>
-  </div>
+  </main>
 </template>
 
 <script lang="ts" setup>
 import { useSeoMeta } from '@unhead/vue'
 import { AisInstantSearch, AisSearchBox, AisHits } from 'vue-instantsearch/vue3/es'
-// Grab DocSearch config from nuxt.config
-// (the component does that by itself as well)
-const { algolia: { docSearch } } = useRuntimeConfig().public
-
 // Used to try the refresh of the component on options changes
 const indexName = ref('test_index')
 
diff --git a/src/runtime/components/AlgoliaDocSearch.vue b/src/runtime/components/AlgoliaDocSearch.vue
index 2ff9730..b61ad08 100644
--- a/src/runtime/components/AlgoliaDocSearch.vue
+++ b/src/runtime/components/AlgoliaDocSearch.vue
@@ -11,7 +11,7 @@ import { DocSearchProps, type docsearch as docsearchFunc } from 'docsearch'
 import type { DocSearchTranslations } from '@docsearch/react'
 import type { HitComponentFunc, ModuleBaseOptions, SearchOptions } from '../../types'
 // @ts-ignore - These are Nuxt3 aliases
-import { useRuntimeConfig, useRoute, useRouter, watch, onMounted, reactive } from '#imports'
+import { useRuntimeConfig, useRoute, useRouter, onMounted, watch } from '#imports'
 
 const route = useRoute()
 const router = useRouter()

From 2683cae30d697bdb5e6dd796d8d2deecdd9c0e23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lehoczky=20Zolt=C3=A1n?= <ifjlehoczkyzoltan@gmail.com>
Date: Wed, 4 Oct 2023 19:10:07 +0200
Subject: [PATCH 3/4] docs: update docsearch page

---
 docs/content/2.advanced/3.docsearch.md | 254 +++++++++++++++++++++++--
 1 file changed, 242 insertions(+), 12 deletions(-)

diff --git a/docs/content/2.advanced/3.docsearch.md b/docs/content/2.advanced/3.docsearch.md
index 29e843f..40dcfb1 100644
--- a/docs/content/2.advanced/3.docsearch.md
+++ b/docs/content/2.advanced/3.docsearch.md
@@ -23,6 +23,10 @@ As DocSearch is an additional feature for @nuxt-modules/algolia, it needs two ad
   npm install @docsearch/js @docsearch/css
   ```
 
+  ```bash [PNPM]
+  pnpm add @docsearch/js @docsearch/css
+  ```
+
 ::
 
 ## Configuration
@@ -31,39 +35,265 @@ You can easily configure DocSearch usage via the `docSearch` key in the module c
 
 By default, it is set to `false`, which disables it and does not ship anything to your Nuxt app bundle.
 
-This key is fully typed and links you to the [DocSearch API reference](https://docsearch.algolia.com/docs/api) for each key.
-
-```javascript
+```ts
 // nuxt.config.ts
-{
+export default defineNuxtConfig({
   algolia: {
     apiKey: 'apiKey',
     applicationId: 'applicationId',
     // DocSearch key is used to configure DocSearch extension.
     docSearch: {
-      indexName: 'indexName',
+      indexName: 'indexName', 
     }
   }  
-}
+})
+```
+
+### Supported options
+
+#### `indexName`
+
+> `type: string` | **required**
+
+Your Algolia index name.
+
+#### `placeholder`
+
+> `type: string` | `default: "Search docs" | **optional**
+
+The placeholder of the input of the DocSearch pop-up modal.
+
+#### `searchParameters`
+
+> `type: SearchParameters` | **optional**
+
+The [Algolia Search Parameters](https://www.algolia.com/doc/api-reference/search-api-parameters/).
+
+#### `disableUserPersonalization`
+
+> `type: boolean` | `default: false` | **optional**
+
+Disable saving recent searches and favorites to the local storage.
+
+#### `initialQuery`
+
+> `type: string` | **optional**
+
+The search input initial query.
+
+#### `translations`
+
+> `type: Partial<DocSearchTranslations>` | `default: docSearchTranslations` | **optional**
+
+Allow translations of any raw text and aria-labels present in the DocSearch button or modal components.
+
+<details><summary>docSearchTranslations</summary>
+<div>
+
+```ts
+const translations: DocSearchTranslations = {
+  button: {
+    buttonText: 'Search',
+    buttonAriaLabel: 'Search',
+  },
+  modal: {
+    searchBox: {
+      resetButtonTitle: 'Clear the query',
+      resetButtonAriaLabel: 'Clear the query',
+      cancelButtonText: 'Cancel',
+      cancelButtonAriaLabel: 'Cancel',
+    },
+    startScreen: {
+      recentSearchesTitle: 'Recent',
+      noRecentSearchesText: 'No recent searches',
+      saveRecentSearchButtonTitle: 'Save this search',
+      removeRecentSearchButtonTitle: 'Remove this search from history',
+      favoriteSearchesTitle: 'Favorite',
+      removeFavoriteSearchButtonTitle: 'Remove this search from favorites',
+    },
+    errorScreen: {
+      titleText: 'Unable to fetch results',
+      helpText: 'You might want to check your network connection.',
+    },
+    footer: {
+      selectText: 'to select',
+      selectKeyAriaLabel: 'Enter key',
+      navigateText: 'to navigate',
+      navigateUpKeyAriaLabel: 'Arrow up',
+      navigateDownKeyAriaLabel: 'Arrow down',
+      closeText: 'to close',
+      closeKeyAriaLabel: 'Escape key',
+      searchByText: 'Search by',
+    },
+    noResultsScreen: {
+      noResultsText: 'No results for',
+      suggestedQueryText: 'Try searching for',
+      reportMissingResultsText: 'Believe this query should return results?',
+      reportMissingResultsLinkText: 'Let us know.',
+    },
+  },
+};
 ```
 
-You can find a list of every supported parameters by looking at the type definition ([DocSearchOptions](https://github.com/nuxt-modules/algolia/tree/main/src/types.ts)).
+</div>
+</details>
+
+#### `facetFilters`
+
+> `type: string` | **optional**
+
+The facetFilters to use in your search parameters. This is local shorthand and provided by `@nuxtjs/algolia`.
+
+This will be overwritten if you add `facetFilters` into your `searchOptions` object.
+
+See [algolia facetFilters](https://www.algolia.com/doc/api-reference/api-parameters/facetFilters/)
+
+#### `langAttribute`
+
+> `type: string` | **optional**
 
-## Usage
+The language to prefix all your facetFilters with. This will be overwritten if you add `facetFilters` into your `searchOptions` object. This is local shorthand and provided by @nuxtjs/algolia.
+
+#### `lang`
+
+> `type: string` | `default: 'en'` | **optional**
+
+Default language to be used on the Algolia DocSearch client.
+
+## Component Usage
 
 You can easily add the component anywhere in your app like this:
 
 ```vue
 <template>
-  <AlgoliaDocSearch :options="options" />
+  <AlgoliaDocSearch />
+</template>
+```
+
+The component will use the configuration values declared in `nuxt.config.ts`.
+
+You can pass the configuration directly to the component as well if it's more convenient for you, like this:
+
+```vue
+<template>
+  <AlgoliaDocSearch 
+    applicationId="appId" 
+    apiKey="key" 
+    indexName="indexName" 
+    placeholder="Search"
+    :searchParameters="{}"
+    :disableUserPersonalization="false"
+    initialQuery=""
+    :translations="{}"
+  />
 </template>
 ```
 
-`options` key is optional.
+::alert{type="info"}
 
-The component will try to resolve the configuration by itself via `useRuntimeConfig`.
+If a specific option is set in both `nuxt.config.ts` and as a component prop, the latter takes precedence.
 
-If you want to overwrite the config from your `nuxt.config`, you can pass the object via the prop.
+::
+
+### Additional Component Props
+
+These options are only available as component props.
+
+#### `transformItems`
+
+> `type: function` | `default: items => items` | **optional**
+
+Receives the items from the search response, and is called before displaying them. Should return a new array with the same shape as the original array. Useful for mapping over the items to transform, and remove or reorder them.
+
+```vue
+<template>
+  <AlgoliaDocSearch 
+    :transform-items="(items) => {
+      return items.map((item) => ({
+        ...item,
+        content: item.content.toUpperCase(),
+      }));
+    }"
+  />
+</template>
+```
+
+#### `hitComponent`
+
+> `type: ({ hit, children }) => JSX.Element` | `default: Hit` | **optional**
+
+The component to display each item.
+
+See the [default implementation](https://github.com/algolia/docsearch/blob/main/packages/docsearch-react/src/Hit.tsx).
+
+#### `transformSearchClient`
+
+> `type: function` | `default: searchClient => searchClient` | **optional**
+
+Useful for transforming the [Algolia Search Client](https://www.algolia.com/doc/api-client/getting-started/what-is-the-api-client/javascript/?client=javascript), for example to debounce search queries:
+
+```vue
+<template>
+    <AlgoliaDocSearch :transform-search-client="transformSearchClient" />
+</template>
+
+<script setup lang="ts">
+import { SearchClient } from 'algoliasearch'
+import { DocSearchProps } from 'docsearch'
+
+const transformSearchClient: DocSearchProps['transformSearchClient'] = (searchClient) => {
+  return {
+    ...searchClient,
+    search: debounce(searchClient.search, 5000)
+  } 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>
+```
+
+#### `navigator`
+
+> `type: Navigator` | **optional**
+
+An implementation of [Algolia Autocomplete](https://www.algolia.com/doc/ui-libraries/autocomplete/introduction/what-is-autocomplete/)’s Navigator API to redirect the user when opening a link.
+
+Learn more on the [Navigator API](https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/keyboard-navigation/) documentation.
+
+#### `getMissingResultsUrl`
+
+> `type: ({ query: string }) => string` | **optional**
+
+Function to return the URL of your documentation repository.
+
+```vue
+<template>
+    <AlgoliaDocSearch :get-missing-results-url="getMissingResultsUrl" />
+</template>
+
+<script setup lang="ts">
+import { DocSearchProps } from 'docsearch'
+
+const getMissingResultsUrl: DocSearchProps['getMissingResultsUrl'] = ({ query }) => {
+  return `https://github.com/algolia/docsearch/issues/new?title=${query}`;
+}
+</script>
+```
 
 ## Theming
 

From bb59a064306bf74a3e414e249af891257334f374 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lehoczky=20Zolt=C3=A1n?= <ifjlehoczkyzoltan@gmail.com>
Date: Wed, 4 Oct 2023 19:11:42 +0200
Subject: [PATCH 4/4] docs: remove trailing whitespace

---
 docs/content/2.advanced/3.docsearch.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/2.advanced/3.docsearch.md b/docs/content/2.advanced/3.docsearch.md
index 40dcfb1..91ed120 100644
--- a/docs/content/2.advanced/3.docsearch.md
+++ b/docs/content/2.advanced/3.docsearch.md
@@ -43,7 +43,7 @@ export default defineNuxtConfig({
     applicationId: 'applicationId',
     // DocSearch key is used to configure DocSearch extension.
     docSearch: {
-      indexName: 'indexName', 
+      indexName: 'indexName',
     }
   }  
 })