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

The following environment variables must be set in order to use the search function properly
# .env


As vue-instantsearch does not work on the Server, vue-instantsearch components such as <AisInstantSearch /> <AisSearchBox /> <AisHits /> must be wrapped in <ClientOnly /> when used.



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


<script lang="ts" setup>
const queryBy = 'title'
const { searchClient, indexName } = useSearchClient({ queryBy })
const searchInput = ref('')

      <AisInstantSearch :search-client="searchClient" :index-name="indexName">

StoripressSearch Component


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:

  const searchInput = ref('')

  <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="" :article="item">


The StoripressSearch component accepts the following props:

  • queryBy: {string} (optional) - Specifies the field by which to perform the search. The default is title.
  • matchWithoutInput: {boolean} (optional) - Determines whether to display recent content when there is no user input. The default is false.
  • lazy: {boolean} (optional) - Please refer to the Lazyload Search Client documentation for details.

Lazyload Search Client


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.


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


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.

  <StoripressSearch lazy />

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.


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