DocSearch provides an easy way for Open Source documentations to have an instant search on their websites!
You probably have seen it in a lot of websites with the Cmd+K shortcut!
Websites like nuxtjs.org, vuejs.org uses it to provide an instant search to users without any backend!
As DocSearch is an additional feature for @nuxtjs/algolia-module, it needs two additional dependencies:
yarn add @docsearch/js @docsearch/cssYou can easily configure DocSearch usage via the docSearch key in the module configuration.
By default, it is set to false, which disables it and does not ship anything to your Nuxt app bundle.
This key is fully typed and links you to the DocSearch API reference for each key.
// nuxt.config.ts{ algolia: { apiKey: 'apiKey', applicationId: 'applicationId', // DocSearch key is used to configure DocSearch extension. docSearch: { indexName: 'indexName', } } }You can find a list of every supported parameters by looking at the type definition (DocSearchOptions).
You can easily add the component anywhere in your app like this:
<template> <AlgoliaDocSearch :options="options" /></template>options key is optional.
The component will try to resolve the configuration by itself via useRuntimeConfig.
If you want to overwrite the config from your nuxt.config, you can pass the object via the prop.
If you want to theme the component, you can use these files as a reference for available variables/classes:
The components gets shipped with @docsearch/css which is the default theme from Algolia.