feat(search): use FTS5 full-text search via useSearchCollection

app/app.vue

@@ -3,7 +3,6 @@ const colorMode = useColorMode()
 const route = useRoute()
 const isChatRoute = computed(() => route.path === '/chat' || route.path.startsWith('/chat/'))
 const { version } = useDocsVersion()
-const { searchGroups, searchLinks, searchTerm, searchFuse } = useNavigation()
 const { fetchList: fetchModules } = useModules()
 const { fetchList: fetchHosting } = useHostingProviders()
 const { track } = useAnalytics()
@@ -16,10 +15,7 @@ watch(() => colorMode.preference, (newMode, oldMode) => {
   }
 })
 
-const [{ data: navigation }, { data: files }] = await Promise.all([
-  useFetch('/api/navigation.json'),
-  useFetch('/api/search.json', { server: false })
-])
+const { data: navigation } = await useFetch('/api/navigation.json')
 
 onNuxtReady(() => {
   fetchModules()
@@ -64,9 +60,6 @@ if (import.meta.server) {
 }
 
 const versionNavigation = computed(() => navigation.value?.filter(item => item.path === version.value.path || item.path === '/blog') ?? [])
-const versionFiles = computed(() => files.value?.filter((file) => {
-  return file.id.startsWith(version.value.path + '/') || file.id.startsWith('/blog/')
-}) ?? [])
 
 provide('navigation', versionNavigation)
 </script>
@@ -80,26 +73,16 @@ provide('navigation', versionNavigation)
         <NuxtLayout>
           <NuxtPage />
         </NuxtLayout>
-
-        <ClientOnly>
-          <LazyAgentFloatingInput v-if="!isChatRoute" />
-        </ClientOnly>
       </div>
 
-      <ClientOnly>
-        <LazyAgentPanel v-if="!isChatRoute" />
+      <ClientOnly v-if="!isChatRoute">
+        <LazyAgentFloatingInput />
+        <LazyAgentPanel />
       </ClientOnly>
     </div>
 
     <ClientOnly>
-      <LazyUContentSearch
-        v-model:search-term="searchTerm"
-        :files="versionFiles"
-        :navigation="versionNavigation"
-        :groups="searchGroups"
-        :links="searchLinks"
-        :fuse="searchFuse"
-      />
+      <Search :navigation="versionNavigation" />
     </ClientOnly>
   </UApp>
 </template>

app/components/Search.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { ContentNavigationItem } from '@nuxt/content'
+
+defineProps<{
+  navigation?: ContentNavigationItem[]
+}>()
+
+const { version } = useDocsVersion()
+
+const collections = computed(() => [version.value.collection, 'blog' as const].filter(Boolean))
+
+const { status, search, init } = useSearchCollection(collections, {
+  immediate: false,
+  ignoredTags: ['style']
+})
+
+const { searchGroups, searchLinks, searchTerm, searchFuse } = useNavigation()
+const { open } = useContentSearch()
+const { track } = useAnalytics()
+
+watch(open, (value) => {
+  if (value && status.value === 'idle') {
+    init()
+  }
+})
+
+watchDebounced(searchTerm, (term) => {
+  if (term) {
+    track('Search Performed', { term })
+  }
+}, { debounce: 500 })
+</script>
+
+<template>
+  <UContentSearch
+    v-model:search-term="searchTerm"
+    :links="searchLinks"
+    :groups="searchGroups"
+    :navigation="navigation"
+    :search="search"
+    :search-status="status"
+    :fuse="searchFuse"
+  />
+</template>

app/composables/useNavigation.ts

@@ -4,7 +4,7 @@ import { createSharedComposable } from '@vueuse/core'
 // Stable reference so the deep watcher inside `useFuse` doesn't rebuild
 // the entire Fuse index on every reactive flush.
 const searchFuse = {
-  resultLimit: 42,
+  resultLimit: 25,
   fuseOptions: {
     threshold: 0
   }
@@ -118,6 +118,7 @@ function _useHeaderLinks() {
     }, {
       label: 'Updates',
       icon: 'i-lucide-newspaper',
+      search: false,
       to: '/blog',
       children: [{
         label: 'Blog',
@@ -229,6 +230,7 @@ const _useNavigation = () => {
     id: `module-${module.name}`,
     label: module.npm,
     suffix: module.description,
+    downloads: module.stats?.downloads ?? 0,
     avatar: {
       src: moduleImage(module.icon),
       ui: {
@@ -255,6 +257,20 @@ const _useNavigation = () => {
   })))
 
   const searchGroups = computed<CommandPaletteGroup[]>(() => [{
+    id: 'modules-search',
+    label: 'Modules',
+    items: modulesItems.value,
+    postFilter: (searchTerm: string, items: any[]) => {
+      if (!searchTerm) {
+        return [...items].sort((a, b) => (b.downloads ?? 0) - (a.downloads ?? 0))
+      }
+      return items
+    }
+  }, {
+    id: 'hosting-search',
+    label: 'Hosting',
+    items: hostingItems.value
+  }, {
     id: 'ask-ai-search',
     label: 'AI',
     ignoreFilter: true,
@@ -273,14 +289,6 @@ const _useNavigation = () => {
         openAgent(searchTerm.value)
       }
     }]
-  }, {
-    id: 'modules-search',
-    label: 'Modules',
-    items: modulesItems.value
-  }, {
-    id: 'hosting-search',
-    label: 'Hosting',
-    items: hostingItems.value
   }])
 
   watchDebounced(searchTerm, (term) => {

app/error.vue

@@ -10,24 +10,17 @@ defineProps<{ error: NuxtError }>()
 
 const route = useRoute()
 const { version } = useDocsVersion()
-const { searchGroups, searchLinks, searchTerm, searchFuse } = useNavigation()
 const { fetchList: fetchModules } = useModules()
 const { fetchList: fetchHosting } = useHostingProviders()
 
-const [{ data: navigation }, { data: files }] = await Promise.all([
-  useFetch('/api/navigation.json'),
-  useFetch('/api/search.json', { server: false })
-])
+const { data: navigation } = await useFetch('/api/navigation.json')
 
 onNuxtReady(() => {
   fetchModules()
   fetchHosting()
 })
 
 const versionNavigation = computed(() => navigation.value?.filter(item => item.path === version.value.path || item.path === '/blog') ?? [])
-const versionFiles = computed(() => files.value?.filter((file) => {
-  return file.id.startsWith(version.value.path + '/') || file.id.startsWith('/blog/')
-}) ?? [])
 
 provide('navigation', versionNavigation)
 </script>
@@ -42,14 +35,7 @@ provide('navigation', versionNavigation)
       <AppFooter />
 
       <ClientOnly>
-        <LazyUContentSearch
-          v-model:search-term="searchTerm"
-          :files="versionFiles"
-          :navigation="versionNavigation"
-          :groups="searchGroups"
-          :links="searchLinks"
-          :fuse="searchFuse"
-        />
+        <Search :navigation="versionNavigation" />
       </ClientOnly>
     </div>
   </UApp>

content/blog/.navigation.yml

@@ -0,0 +1 @@
+icon: i-lucide-newspaper

nuxt.config.ts

@@ -169,7 +169,6 @@ export default defineNuxtConfig({
     '/admin/**': { ssr: false },
     // Main navigation
     '/api/navigation.json': { prerender: true },
-    '/api/search.json': { prerender: true },
     // Redirects
     '/docs': { redirect: '/docs/getting-started/introduction', prerender: false },
     '/docs/3.x': { redirect: '/docs/3.x/getting-started/introduction', prerender: false },

package.json

@@ -38,7 +38,7 @@
     "@nuxt/hints": "^1.1.2",
     "@nuxt/image": "^2.0.0",
     "@nuxt/scripts": "^1.1.0",
-    "@nuxt/ui": "^4.7.1",
+    "@nuxt/ui": "^4.8.0",
     "@nuxthub/core": "^0.10.7",
     "@nuxtjs/html-validator": "^2.1.0",
     "@nuxtjs/mcp-toolkit": "^0.17.1",

pnpm-workspace.yaml

@@ -11,3 +11,6 @@ allowBuilds:
   puppeteer: false
   unrs-resolver: false
   vue-demi: false
+
+minimumReleaseAgeExclude:
+  - '@nuxt/ui@4.8.0'