fix(theme/search): prevent reactivity loss with i18n (#3121)

src/client/theme-default/components/VPAlgoliaSearchBox.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { DefaultTheme } from 'vitepress/theme'
 import docsearch from '@docsearch/js'
-import { onMounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vitepress'
-import { useRouter, useRoute } from 'vitepress'
+import type { DefaultTheme } from 'vitepress/theme'
+import { nextTick, onMounted, watch } from 'vue'
 import { useData } from '../composables/data'
 
 const props = defineProps<{
@@ -18,7 +18,8 @@ type DocSearchProps = Parameters<typeof docsearch>[0]
 onMounted(update)
 watch(localeIndex, update)
 
-function update() {
+async function update() {
+  await nextTick()
   const options = {
     ...props.algolia,
     ...props.algolia.locales?.[localeIndex.value]
@@ -86,12 +87,7 @@ function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
 
 function getRelativePath(url: string) {
   const { pathname, hash } = new URL(url, location.origin)
-  return (
+  return pathname.replace(/\.html$/, site.value.cleanUrls ? '' : '.html') + hash
-    pathname.replace(
-      /\.html$/,
-      site.value.cleanUrls ? '' : '.html'
-    ) + hash
-  )
 }
 </script>
 

src/client/theme-default/components/VPLocalSearchBox.vue

@@ -4,6 +4,7 @@ import {
   computedAsync,
   debouncedWatch,
   onKeyStroke,
+  reactify,
   useEventListener,
   useLocalStorage,
   useScrollLock,
@@ -12,7 +13,7 @@ import {
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
 import Mark from 'mark.js/src/vanilla.js'
 import MiniSearch, { type SearchResult } from 'minisearch'
-import { inBrowser, useRouter, dataSymbol } from 'vitepress'
+import { dataSymbol, inBrowser, useRouter } from 'vitepress'
 import {
   computed,
   createApp,
@@ -22,6 +23,7 @@ import {
   onMounted,
   ref,
   shallowRef,
+  toRef,
   watch,
   watchEffect,
   type Ref
@@ -352,7 +354,10 @@ const defaultTranslations: { modal: ModalTranslations } = {
   }
 }
 
-const $t = createTranslate(theme.value.search?.options, defaultTranslations)
+const $t = reactify(createTranslate)(
+  toRef(() => theme.value.search?.options),
+  defaultTranslations
+)
 
 // Back
 

src/client/theme-default/components/VPNavBarSearchButton.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { reactify } from '@vueuse/core'
+import { toRef } from 'vue'
 import type { ButtonTranslations } from '../../../../types/local-search'
 import { useData } from '../composables/data'
 import { createTranslate } from '../support/translation'
@@ -9,11 +11,14 @@ const { theme } = useData()
 const defaultTranslations: { button: ButtonTranslations } = {
   button: {
     buttonText: 'Search',
-    buttonAriaLabel: 'Search',
+    buttonAriaLabel: 'Search'
   }
 }
 
-const $t = createTranslate(theme.value.search?.options, defaultTranslations)
+const $t = reactify(createTranslate)(
+  toRef(() => theme.value.search?.options),
+  defaultTranslations
+)
 </script>
 
 <template>