A Vue.js pluggin for fuzzy search library, Fuse.js
npm install vue-fuseA fully typed, lightweight, and reactive interface for Fuse.js
fuzzy search lib.
Check out the 3.x branch for older version, or look at release notes.
vue-fuse uses vue-demi to offerVue 2.X requires @vue/composition-api
npm i vue-fuse fuse.js
``vue
Sorry, no results for {{search}}
{{ r }}
`
and/or the VueFuse class constructor accept an optional
second argument where you can pass in a Fuse.js Options Objectresults, resultsRaw, noResults
`js
const { results, resaltsRaw, noResults } = useVueFuse(['a', 'b', 'c'])
`results - is an array containing a the subset of items you passed in that match the search
resultsRaw - exposed the full result payload from Fuse.js, this contains things like the
original array index or the match "score".
noResults - a computed boolean that will be true when there are no results,
but the search term is not emptySearching Array of Objects
The examples above include simple arrays of strings, but you'll probably want to
search accross more complex data structures. Fuse.js supports this by allowing you to
pass keys into the search options.so if you have an array of objects like this:
`js
const bikes = [
{
brand: 'Santa Cruz',
model: '5010',
year: 2021,
wheelSize: 27.5,
},
{
brand: 'Canyon',
model: 'Neuron',
year: 2021,
wheelSize: 29,
}
]
`To search by brand and model, you could set your config to:
`js
{
keys: ['brand', 'model']
}
`You can also weight each key differently
`js
{
keys: [
{
name: 'brand',
weight: 3,
},
{
name: 'model',
weight: 1,
}
]
}
`You can also search nested keys by chaining the property names
`js
{
keys: ['foo', 'bar.baz.buzz']
}
``