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 used an indexed search. This mean that the search will be faster and the API response smaller and optimized only usable by miniSearch.

Internally, the search feature, both searchContent and /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