Using the Vue Fuse component to leverage Fuse.js, a lightweight search library

vue-fuse

With components searching your data can be fairly easy. A lightweight Vue plugin, Vue Fuse is now available for fuzzy search using the existing library, Fuse.js. Take a look at the demo and proceed to see an implementation to a Vue.js project.

Vue Fuse 1.2 update for the search plugin is out now, adds $search instance method for quick and awesome searching anywhere in your app!

Example

Install

Install it in your project via yarn

yarn add vue-fuse

In your main.js file import the plugin

import VueFuse from 'vue-fuse'

Vue.use(VueFuse)

Then in your templates, you can use the component

<template>
  <vue-fuse 
        :keys="keys" 
        :list="bikes"
        :defaultAll="false" 
        :eventName="fuseResultsUpdated" 
        @fuseResultsUpdated="results($event)"
        >
        </vue-fuse>
</template>

First, the keys property must be present in your data along with the list.

keys is a list of properties that will be searched. list is the array of items that Fuse will search.

Most of the props line up with Fuse.js options with the defaults set to match the default Fuse.js behavior.

Include these in your data function

<script>
export default {
  data () {
    return {
      bikes: [
        {
          brand: "Schwinn",
          model: {
            name: "Classic",
            id: "1345"
          }
        },
        {
          brand: "Red Line",
          model: {
            name: "Flight",
            id: "5430"
          }
        },
                ...
      ],
      keys: ["brand", "model.name", "model.id"]
    }
  }
}
</script>

Here we are using the data from the example given in the plugin's repo.

defaultAll, if true, then the results will include ALL items in the list when the search is null. If false, results will include no items when the search is null. The eventName is used here to give a name to the event emitted when the search results are updated. This is useful when you actually want to do something with the results.

After we give the event a name, here fuseResultsUpdated, we can run a function when its emitted

@fuseResultsUpdated="results($event)"

<script>

methods: {
    results (results) {
        this.result = results
    },
}

</script>

We pass the results to an empty array, and then we can use a list to display them in real time

<ul v-for="item in result" class="list-group">
<!-- list items from the result array -->
    <li class="list-group-item">Brand: {{item.brand}}</li>
    <li class="list-group-item">Id: {{item.model.id}}</li>
    <li class="list-group-item">Model: {{item.model.name}}</li>
</ul>

And there it is, Vue Fuse, utilizing the Fuse.js library

The vue fuse component leverages Fuse.js. For complete documentation, check out http://fusejs.io/

Created by @shayneosullivan.