01
FebVille 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.
You can visit its live demo is here.
The following instructions assume you have a package.json
in your project.
vue@next
and vue-json-search
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.)
<div>
<h2>Search</h2>
<div id="searchapp"></div>
</div>
Make /index.json
available (see expected JSON format and configuration options below)
Add your styles
and you’re done.
<div>
<h2>Search</h2>
<div id="searchapp"></div>
</div>
You can use this like any other Vue component.
import { JsonSearch } from 'vue-json-search'
<JsonSearch :max-results="20" />
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 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.
Published at : 01-02-2022
I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.
Launch project