Search a Nuxt Content collection
In Nuxt Content v3, queryCollectionSearchSections() returns searchable text. This example filters it in the browser. Replace content with your collection name.
<script setup lang="ts">
const search = ref('')
const { data: sections } = await useAsyncData(
'content-search',
() => queryCollectionSearchSections('content')
)
const results = computed(() => {
const query = search.value.trim().toLowerCase()
if (!query) return []
return (sections.value ?? []).filter(section =>
`${section.title} ${section.content}`
.toLowerCase().includes(query)
)
})
</script>
<template>
<label for="search">Search documentation</label>
<input id="search" v-model="search" type="search">
<ul>
<li v-for="result in results" :key="result.id">
<NuxtLink :to="result.id">{{ result.title }}</NuxtLink>
</li>
</ul>
</template>
This downloads the search sections to the client. For a large collection, use server-side search instead.