4a3ce4cc1d
Add comprehensive reference documentation for: - Vitest: environments, projects/workspaces, type testing, vi utilities - Pinia: HMR, Nuxt integration, SSR setup - Vue: built-in components (Transition, Teleport, Suspense, KeepAlive) and advanced directives
1.4 KiB
1.4 KiB
category
| category |
|---|
| @Integrations |
useFuse
Easily implement fuzzy search using a composable with Fuse.js.
From the Fuse.js website:
What is fuzzy searching?
Generally speaking, fuzzy searching (more formally known as approximate string matching) is the technique of finding strings that are approximately equal to a given pattern (rather than exactly).
Install Fuse.js as a peer dependency
NPM
npm install fuse.js@^7
Yarn
yarn add fuse.js
Usage
import { useFuse } from '@vueuse/integrations/useFuse'
import { shallowRef } from 'vue'
const data = [
'John Smith',
'John Doe',
'Jane Doe',
'Phillip Green',
'Peter Brown',
]
const input = shallowRef('Jhon D')
const { results } = useFuse(input, data)
/*
* Results:
*
* { "item": "John Doe", "index": 1 }
* { "item": "John Smith", "index": 0 }
* { "item": "Jane Doe", "index": 2 }
*
*/
Type Declarations
export type FuseOptions<T> = IFuseOptions<T>
export interface UseFuseOptions<T> {
fuseOptions?: FuseOptions<T>
resultLimit?: number
matchAllWhenSearchEmpty?: boolean
}
export interface UseFuseReturn<DataItem> {
fuse: Ref<Fuse<DataItem>>
results: ComputedRef<FuseResult<DataItem>[]>
}
export declare function useFuse<DataItem>(
search: MaybeRefOrGetter<string>,
data: MaybeRefOrGetter<DataItem[]>,
options?: MaybeRefOrGetter<UseFuseOptions<DataItem>>,
): UseFuseReturn<DataItem>