A Headless Vue JSON Search Component Based on Fuse.Js

Ville Säävuori comes up with a new headless Vue 3 Json search component based on Fuse.js. This search has been designed for static generators like Hugo but it can work with any site that is capable of producing a JSON corpus. It has the following features.

• Easy to setup with any software
• 100% control of the markup and styles using - headless Vue components and slots
• Lightweight and minimal dependencies (Fuse.js and Vue 3), ~8 Kb zipped

You can visit its live demo is here.

Simple Usage With Static Site

The following instructions assume you have a package.json in your project.

1. Install vue@next and vue-json-search
2. Create a simple search.js script for your site:

import { createApp, h } from 'vue'
import { JsonSearch } from 'vue-json-search'

createApp({
  render: () => h(JsonSearch, { showTags: true }), // Props argument dict is optional
}).mount('#searchapp')

The above shows a minimal functional way to use this component. It’s just JavaScript, use it however works best for you. (The example has the advantage of not needing Vue templates, thus resulting in smaller bundle size.)

3. Add a search component to your HTML template:

<div>
    <h2>Search</h2>
    <div id="searchapp"></div>
</div>

4. Make /index.json available (see expected JSON format and configuration options below)

5. Add your styles and you’re done.

<div>
    <h2>Search</h2>
    <div id="searchapp"></div>
</div>

Using As Vue Component

You can use this like any other Vue component.

1. Import the component in your project.

import { JsonSearch } from 'vue-json-search'

2. And then use it in your template as any other Vue component:

<JsonSearch :max-results="20" />

Customizing Markup

You can customize 100% of the markup using Vue slots.

First import the components you need:

import { JsonSearch, ResultList, ResultListItem, ResultTitle, SearchInput, SearchResults } from 'vue-json-search'

Then do whatever you want with them. Here’s a simple example:

<JsonSearch :show-tags="true" v-slot="{ results }">
  <SearchInput />
  <SearchResults>
    <ResultTitle />
    <div v-for="res in results" :key="res.refIndex">
      <ResultListItem v-slot="{ result }" :result="res.item">
        <p>Title: {{ result.title }}</p>
        <p>Tags: {{ result.tags }}</p>
      </ResultListItem>
    </div>
  </SearchResults>
</JsonSearch>

The documentation for the components is not great but the source is easy to read and understand if you are familiar with Vue.

Setting Up With Hugo Pipelines

Setting this up with Hugo can be done in less than 5 minutes. Read this blog post for step-by-step instructions.

For more details about this package, you can visit its complete documentation and source code on Github.