Search
Introduction
Karbon uses Algolia’s vue-instantsearch to provide search functionality for your publication website, for more details, please refer to see here:
The domain-wide useSearchClient composable is provided for use with the <AisInstantSearch /> component.
Using .env
# .env
ClientOnly
As vue-instantsearch does not work on the Server, vue-instantsearch components such as <AisInstantSearch /> <AisSearchBox /> <AisHits /> must be wrapped in <ClientOnly /> when used.
Usage
useSearchClient composable
interface UseSearchClientInput {
/**
* Fields for query, this is a comma separated string
*/
queryBy?: string
/**
* API key, this will override the key in runtimeConfig
*/
apiKey?: string
}
const useSearchClient: (params?: UseSearchClientInput) => {
searchClient: any;
indexName: string;
}Call at the location where you need to use the <AisInstantSearch /> component to fetch the relevant parameters
// script
const { searchClient, indexName } = useSearchClient({ queryBy })
// template
<AisInstantSearch :search-client="searchClient" :index-name="indexName">
...
</AisInstantSearch>Examples
<script lang="ts" setup> const queryBy = 'title' const { searchClient, indexName } = useSearchClient({ queryBy }) const searchInput = ref('') </script> <template> <div> <ClientOnly> <AisInstantSearch :search-client="searchClient" :index-name="indexName">
StoripressSearch Component
Overview
The StoripressSearch component is designed to simplify the usage of related components by providing a straightforward interface. It allows you to easily implement search functionality in your application.
Example Usage
Below is an example of how to use the StoripressSearch component in your Vue application:
<script> const searchInput = ref('') </script> <template> <input v-model="searchInput" placeholder="Search..."> <StoripressSearch v-model="searchInput" v-slot="{ items }"> <!-- You can custom your interface here --> <ArticleCard v-for="item of items" :key="item.id" :article="item"> </StoripressSearch> </template>
Props
The StoripressSearch component accepts the following props:
queryBy: {string} (optional) - Specifies the field by which to perform the search. The default istitle.
matchWithoutInput: {boolean} (optional) - Determines whether to display recent content when there is no user input. The default isfalse.
lazy: {boolean} (optional) - Please refer to theLazyload Search Clientdocumentation for details.
Lazyload Search Client
Overview
The Lazy Search Client is a feature designed to reduce the initial JavaScript (JS) bundle size. Since users typically don't use the search functionality right after loading a page, using the Lazy Search Client can significantly reduce the initial JS payload.
Usage
Enabling the Feature
You can enable the Lazy Search Client feature in your nuxt.config.ts file. If not enabled, there won't be any lazy loading effect.
export default defineNuxtConfig({
karbon: {
flags: {
lazySearch: true
}
}
})Implementation
After enabling the feature, you have the option to use it via a component or composable.
Using the Component
Simply add the lazy attribute to the StoripressSearch component in your Vue template.
<template> <StoripressSearch lazy /> </template>
Using the Composable
You can also use the useLazySearchClient composable to obtain the lazy search client.
useLazySearchClient(...) // Parameters are the same as for useSearchClient()
Important Notes
If you enable lazySearch, attempting to use useSearchClient or use StoripressSearch component without adding the lazy attribute will result in an error.
Verification
To verify whether the Lazy Search Client is working as expected, you can use the nuxt analyze command to check the content of the entry bundle. Ensure that it includes the search client, Typesense, and other relevant content.
For more information, see the Nuxt Analyze documentation.
Last updated on January 16, 2023