Skip to content

Latest commit

 

History

History
143 lines (129 loc) · 3.92 KB

README.md

File metadata and controls

143 lines (129 loc) · 3.92 KB
Raw

vue-fuse npm package

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.

Migrating from 2 to 3

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

Installation

npm install vue-fuse

VueFuse should be registered as a component within a parent component

<script>
import VueFuse from 'vue-fuse'

export default {
  components: {
    VueFuse,
  },
}
</script>

Full Fuse.js Documentation

This is just a simple drop in component leverage Fuse.js. For complete documentation, check out http://fusejs.io/

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.

vue-fuse Compoment Props

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

Component Demo / Example

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

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 fuse-results and contains the result array.