Advanced
Full-Text Search
Implement full-text search in your website using Nuxt Content
Content module expose a handy utility queryCollectionSearchSections to break down content files into searchable sections. This is useful for implementing full-text search in your website.
You can use the result of this utility in combination with Nuxt UI Content Search or other search libraries like Fuse.js, minisearch, etc.
Nuxt UI Pro
Nuxt UI Pro provides a ready to use component for full-text search. You can use it by passing the result of queryCollectionSearchSections to the files prop of the component.
Read more about Nuxt UI Content Search.
<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))
const { data: files } = await useAsyncData('search', () => queryCollectionSearchSections('docs'))
const searchTerm = ref('')
</script>
<template>
<UContentSearch
v-model:search-term="searchTerm"
:files="files"
:navigation="navigation"
:fuse="{ resultLimit: 42 }"
/>
</template>
MiniSearch example
Read more about minisearch.
<script setup lang="ts">
import MiniSearch from 'minisearch'
const query = ref('')
const { data } = await useAsyncData('search', () => queryCollectionSearchSections('docs'))
const miniSearch = new MiniSearch({
fields: ['title', 'content'],
storeFields: ['title', 'content'],
searchOptions: {
prefix: true,
fuzzy: 0.2,
},
})
// Add data to the MiniSearch instance
miniSearch.addAll(toValue(data.value))
const result = computed(() => miniSearch.search(toValue(query)))
</script>
<template>
<UContainer class="p-4">
<UCard>
<UInput v-model="query" placeholder="Search..." />
<ul>
<li v-for="link of result" :key="link.id" class="mt-2">
<NuxtLink :to="link.id">{{ link.title }}</NuxtLink>
<p class="text-gray-500 text-xs">{{ link.content }}</p>
</li>
</ul>
</UCard>
</UContainer>
</template>
Fuse.js example
Read more about Fuse.js.
<script setup lang="ts">
import Fuse from 'fuse.js'
const query = ref('')
const { data } = await useAsyncData('search-data', () => queryCollectionSearchSections('docs'))
const fuse = new Fuse(data.value, {
keys: ['title', 'description']
})
const result = computed(() => fuse.search(toValue(query)).slice(0, 10))
</script>
<template>
<UContainer class="p-4">
<UCard>
<UInput v-model="query" placeholder="Search..." class="w-full" />
<ul>
<li v-for="link of result" :key="link.item.id" class="mt-2">
<UButton variant="ghost" class="w-full" :to="link.item.id">
{{ link.item.title }}
<span class="text-gray-500 text-xs">
{{ link.item.content?.slice(0, 100) }}...
</span>
</UButton>
</li>
</ul>
</UCard>
</UContainer>
</template>