vitepress/docs/reference/default-theme-search.md

Search

Local Search

VitePress supports fuzzy full-text search using a in-browser index thanks to minisearch. You can enable it in your .vitepress/config.ts with the localSearch theme config:

import { defineConfig } from 'vitepress'

export default defineConfig({
  themeConfig: {
    localSearch: true
  }
})

Example result:

Alternatively, you can use Algolia DocSearch or some community plugins like https://www.npmjs.com/package/vitepress-plugin-search or https://www.npmjs.com/package/vitepress-plugin-pagefind.

i18n

You can use a config like this to use multilingual search:

import { defineConfig } from 'vitepress'

export default defineConfig({
  themeConfig: {
    localSearch: {
      locales: {
        zh: {
          translations: {
            button: {
              buttonText: '搜索文档',
              buttonAriaLabel: '搜索文档'
            },
            modal: {
              noResultsText: '无法找到相关结果',
              resetButtonTitle: '清除查询条件',
              footer: {
                selectText: '选择',
                navigateText: '切换'
              }
            }
          }
        }
      }
    }
  }
})

Algolia Search

VitePress supports searching your docs site using Algolia DocSearch. Refer their getting started guide. In your .vitepress/config.ts you'll need to provide at least the following to make it work:

import { defineConfig } from 'vitepress'

export default defineConfig({
  themeConfig: {
    algolia: {
      appId: '...',
      apiKey: '...',
      indexName: '...'
    }
  }
})

i18n

You can use a config like this to use multilingual search:

import { defineConfig } from 'vitepress'

export default defineConfig({
  // ...
  themeConfig: {
    // ...

    algolia: {
      appId: '...',
      apiKey: '...',
      indexName: '...',
      locales: {
        zh: {
          placeholder: '搜索文档',
          translations: {
            button: {
              buttonText: '搜索文档',
              buttonAriaLabel: '搜索文档'
            },
            modal: {
              searchBox: {
                resetButtonTitle: '清除查询条件',
                resetButtonAriaLabel: '清除查询条件',
                cancelButtonText: '取消',
                cancelButtonAriaLabel: '取消'
              },
              startScreen: {
                recentSearchesTitle: '搜索历史',
                noRecentSearchesText: '没有搜索历史',
                saveRecentSearchButtonTitle: '保存至搜索历史',
                removeRecentSearchButtonTitle: '从搜索历史中移除',
                favoriteSearchesTitle: '收藏',
                removeFavoriteSearchButtonTitle: '从收藏中移除'
              },
              errorScreen: {
                titleText: '无法获取结果',
                helpText: '你可能需要检查你的网络连接'
              },
              footer: {
                selectText: '选择',
                navigateText: '切换',
                closeText: '关闭',
                searchByText: '搜索提供者'
              },
              noResultsScreen: {
                noResultsText: '无法找到相关结果',
                suggestedQueryText: '你可以尝试查询',
                reportMissingResultsText: '你认为该查询应该有结果？',
                reportMissingResultsLinkText: '点击反馈'
              }
            }
          }
        }
      }
    }
  }
})

These options can be overridden. Refer official Algolia docs to learn more about them.