Easy Way to Integrate Algolia to VuePress Application
Tags: vue, beginners, webdev, tutorial
Published: 2022-10-30 14:16:00

## Background

The search that comes with VuePress, although it can be used out of the box, does not support more complex search scenarios.

## Algolia

[Algolia](https://www.algolia.com/) empowers Builders with Search and Recommendation services to create world-class digital experiences.**I chose the free service.**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzdfv98x1jdh4id1lvba.png)



### Register and Create Index

First, register with Algolia. Then you need to upload the document information in VuePress application to Algolia. [DocSearch](https://docsearch.algolia.com/) provides a crawler and UI to easily crawl index information and upload it. However, you need to meet certain [conditions](https://docsearch.algolia.com/docs/who-can-apply) to apply for this service. Fortunately, the old version of DocSearch provided a solution to run the crawler yourself. So I ended up with the [Run Your Own](https://docsearch.algolia.com/docs/legacy/run-your-own/) solution.

create a .env file

```bash
APPLICATION_ID=YOUR_APP_ID
API_KEY=YOUR_API_KEY
```

install jq

```bash
brew install jq
```

create config.json file that describes the crawler rules

```
{
  "index_name": "xxxxxx",
  "start_urls": ["www.example.com"],
  "selectors": {
    "lvl0": ".theme-default-content h1",
    "lvl1": ".theme-default-content h2",
    "lvl2": ".theme-default-content h3",
    "lvl3": ".theme-default-content h4",
    "lvl4": ".theme-default-content h5",
    "lvl5": ".theme-default-content h6",
    "text": ".theme-default-content p, .theme-default-content li",
		"lang": {
      "selector": "/html/@lang",
      "type": "xpath",
      "global": true
    }
  },
	"custom_settings": {
    "attributesForFaceting": [
      "lang"
    ]
  }
}
```

Run the crawler

```bash
docker run -it --env-file=.env -e "CONFIG=$(cat /path/to/your/config.json | jq -r tostring)" algolia/docsearch-scraper
```

Confirm your index in Algolia console.

## VuePress Config

I use the default theme so my config:

```bash
themeConfig: {
    nav: navConfig,
    smoothScroll: true,
    algolia: {
      apiKey: '<API_KEY>',
      indexName: '<INDEX_NAME>',
      appId: '<APP_ID>',
    }
  }
```

Run the application and search !

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gwja51tyqrw838kw257.png)



## Key Points

Looking at the HTTP request parameters, we can see “Facefilters”.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wrk0lx1kovnr53d6kine.png)
This parameter is default and there is a [issue](https://github.com/vuejs/vuepress/issues/2802).

**If you don't want to modify frontend components, the index must have the lang attribute.**This is why there are lang configurations in the crawler rules.

In addition, your crawler rules need to be consistent with your page.I use default theme and html code is like this:

```bash
<div class="theme-default-content content__default">
<h1 id="jian-jie"><a href="#jian-jie" class="header-anchor">#</a> Introduction</h1> 
<p>xxxxxxxxxxxxxx</p>
</div>
```

If you use other vuepress themes, you can customize your crawler rules.