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.

Live Demo

https://vue-fuse.firebaseapp.com/

GitHub