Adding Blazing-Fast Client-Side Search with Fuse.js

Fuse.js is a powerful, lightweight fuzzy-search library that works entirely client-side. It's perfect for blogs and documentation sites where you want fast search without a backend.

Why Fuse.js?

• Lightweight: ~15KB gzipped.
• Fuzzy matching: Handles typos and approximate searches.
• Configurable: Weight fields, threshold tuning, and extended search.
• Zero dependencies: No server, no index builds.

Basic Setup

``ts import Fuse from 'fuse.js'

const posts = [ { title: 'Brutalist Design', content: '...' }, { title: 'Nuxt 4 Migration', content: '...' }, ]

const fuse = new Fuse(posts, { keys: ['title', 'content', 'tags'], threshold: 0.3, includeScore: true, })

const results = fuse.search('brutalist') // [{ item: {...}, score: 0.1, refIndex: 0 }] `

Advanced Configuration

Tune the search experience with weighted keys:

`ts const fuse = new Fuse(posts, { keys: [ { name: 'title', weight: 0.7 }, { name: 'tags', weight: 0.5 }, { name: 'content', weight: 0.3 }, ], threshold: 0.4, distance: 100, }) `

Title matches get priority, then tags, then body content. This creates a natural search ranking that matches user expectations.

Integration with Vue/Nuxt

Create a composable:

`ts export function useSearch(posts: Ref) { const query = ref('') const fuse = computed(() => new Fuse(posts.value, { ... })) const results = computed(() => query.value ? fuse.value.search(query.value) : [] ) return { query, results } } ``

The result is instant, typo-tolerant search that works offline and requires zero infrastructure.