Search

With some simple configuration and a composable, you can add search to your Nuxt Content site.

Usage

First, you need to enable search in the nuxt.config.js file:

export default defineNuxtConfig({
  content: {
    experimental: {
      search: true
    }
  }
})

Search

You can use the searchContent composable to search in your content directory:

<script lang="ts" setup>
const search  = ref('')

const results = searchContent(search)
</script>

<template>
  <main>
    <input v-model="search">

    <pre>{{ result }} </pre>
  </main>
</template>

By default, the searchContent composable will used an indexed search. This mean that the search will be faster and the API response smaller and optimized only usable by miniSearch.

Simple Search

If needed, you can disable the indexed search and use a simple search instead:

export default defineNuxtConfig({
  content: {
    experimental: {
      search: {
        indexed: false
      }
    }
  }
})

Remember that the simple search is slower and the API response bigger. You can still use the searchContent composable which is agnostic of the search type.

Custom Search

Using the simple search, aka non-indexed search, you can use the tool of your choice to search in the API response. For example, you can use fuse.js with the integration of @vueuse/integrations:

export default async function customSearchContent(search: Ref<string>) {
  const runtimeConfig = useRuntimeConfig()
  const { integrity, api } = runtimeConfig.public.content

  const { data } = await useFetch(`${api.baseURL}/search${integrity ? '.' + integrity : ''}.json`)

  const { results } = useFuse(search, data)

  return results
}

Configuration

Please, read the configuration section to learn more about the search configuration.