vue-fuse 
A Vue.js pluggin for fuzzy search library, Fuse.js
There are two ways to use this plugin. Thevue-fusecomponent, or the$searchmethod. Be sure to take a look at the documentation for both below.
Install
npm install vue-fuse
yarn add vue-fuse
In main.js
import VueFuse from 'vue-fuse'
Vue.use(VueFuse)
Full Fuse.js Documentation
This is just a simple drop in component leverage Fuse.js. For complete documentation, check out http://fusejs.io/
$search Method
The $search instance method allows you to execute a search programmatically within your application. Calling the this.$search function will return a promise, that is fulfilled once Fuse.js returns completes the search. $search takes the following params:
term- (required) the search term or query that you will search bylist- (required) an array of items to searchoptions- (required) an object with fuse.js options. At minimum, you must provide an array ofkeys. Other options will default to the fuse.js defaults (see here: http://fusejs.io/)
$search example
this.$search(this.term, this.bikes, this.options).then(results => {
this.searchResults = results
})
vue-fuse Component
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.
Compoment Props
Most of the props line up with Fuse.js options with the defaults set to match the defaut Fuse.js behavior.
Component Demo / Example
<template>
<vue-fuse :keys="keys" :list="bikes" :defaultAll="false" :eventName="bikesChanged"></vue-fuse>
</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"
}
}
],
keys: ["brand", "model.name", "model.id"]
}
}
}
</script>
Accessing Results from vue-fuse Component
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 fuseResultsUpdated and contains the result array. You can also name the event yourself (this is handy if you have more than one instance of vue-fuse in your application) by passing in a string to the eventName prop.