vue-fuse

A Vue.js pluggin for fuzzy search library, Fuse.js There are two ways to use this plugin. The vue-fuse component, or the $search method. 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 by
• list - (required) an array of items to search
• options - (required) an object with fuse.js options. At minimum, you must provide an array of keys. 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

• LIVE DEMO
• DEMO SOURCE

<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.