Search

Usage

First, you need to enable the search feature in your nuxt.config.ts:

nuxt.config.ts

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

You can use the search feature with any Nuxt Content source. You can also enable or not the document-driven feature.

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

app.vue

<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 use an indexed search. This means that the search is faster and the API response is smaller and optimized. The response is only usable by miniSearch.

Internally, both the searchContent composable and the /api/indexed-search.ts endpoint use miniSearch.

Simple Search

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

nuxt.config.ts

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:

composables/custom-search-content.ts

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 options.

Render Content

Render the body of a Markdown document in a rich-text format.

Fetch Navigation

Component and composable to display a navigation