A Vue.js pluggin for fuzzy search library, Fuse.js. This plugin wraps Fuse.js in a convenient component with most of the boilerplate and props already set up. It's designed to enable you drop a client-side fuzzy search into your app without much work.
The 3.x version of vue-fuse is compatible with both Vue 2.x and Vue 3.x. However, there were some breaking changes made
to better accomodate things going forward. For full details, check out the migration guide
npm install vue-fuseVueFuse should be registered as a component within a parent component
<script>
import VueFuse from 'vue-fuse'
export default {
components: {
VueFuse,
},
}
</script>
This is just a simple drop in component leverage Fuse.js. For complete documentation, check out http://fusejs.io/
The vue-fuse component can be added any of your existing Vue components. It creates an input html element, and takes props (listed below) to execute a search. Search results are then returned via events.
Most of the props line up with Fuse.js options with the defaults set to match the defaut Fuse.js behavior.
| Property | Desc | Type | Default values |
|---|---|---|---|
| placeholder | placeholder text for the input | String | `""` |
| defaultAll | If true, results will inclide ALL items in list when search is null. If false, results will inclide no items when search is null. | Boolean | true |
| list | The array of items that Fuse will search | Array | [] |
| fuseOpts | The fuse.js configuration object. | Oject, required | {} |
| defaultAll | If true, results will inclide ALL items in list when search is null. If false, results will inclide no items when search is null. | Boolean | true |
| mapResults | If true, search meta info (such as score and original index) will be removed from the result payload, and only the item from the list will be returned. | Boolean | false |
| search | Binding to the search prop will allow you to map data directly to the input | String | "" |
<template>
<VueFuse :keys="keys" :list="bikes" :defaultAll="false" />
</template>
<script>
export default {
data () {
return {
bikes: [
{
brand: "Schwinn",
model: {
name: "Classic",
id: "1345"
}
},
{
brand: "Red Line",
model: {
name: "Flight",
id: "5430"
}
},
{
brand: "Hoffman",
model: {
name: "Condore",
id: "0543"
}
},
{
brand: "Tribe",
model: {
name: "CRMO",
id: "0432"
}
}
],
opts: {
keys: ["brand", "model.name", "model.id"]
}
}
}
}
</script>
Results are stored in the result data array of the vue-fuse component. The component watches the result array and emits an event when the array is changed. This event is named fuse-results and contains the result array.