vuepress-plugin-meilisearch

vuepress-plugin-meilisearch

Add a relevant and typo tolerant search bar to your Vuepress with MeiliSearch.

MeiliSearch is a powerful, fast, open-source, easy to use and deploy search engine. Both searching and indexing are highly customizable. Features such as typo-tolerance, filters, and synonyms are provided out-of-the-box

This plugin is used in production on the MeiliSearch documentation.

.

Table of Contents

• Usage
  • Run MeiliSearch
  • Basic usage
  • Customization
• Scrap your content
  • Your MeiliSearch Instance
  • Your scraper
• Development Workflow
• Related repositories

Usage

Run MeiliSearch

First of all, you need your Vuepress content to be scraped and pushed into a MeiliSearch instance.

This can be done in few steps. Read the dedicated section.

The host URL, the API key and the index UID you will provide in your configuration file are the credentials of this MeiliSearch instance.

Without running a MeiliSearch instance, the next steps will not work.

Basic usage

In your Vuepress project:

$ yarn add vuepress-plugin-meilisearch
# or
$ npm install vuepress-plugin-meilisearch

In your config.js file:

module.exports = {
  plugins: [
    [
      "vuepress-plugin-meilisearch",
      {
        "hostUrl": "https://mymeilisearch.com",
        "apiKey": "XXX",
        "indexUid": "docs"
      }
    ],
  ],
}

WARNING: Since the configuration file is public, we recommand to provide the MeiliSearch public key, which is enough to perform searches.
Read more about MeiliSearch authentication.

Customization

module.exports = {
  plugins: [
    [
      "vuepress-plugin-meilisearch",
      {
        "hostUrl": "https://mymeilisearch.com", // Mandatory
        "apiKey": "XXX",                        // Mandatory
        "indexUid": "docs-test",                // Mandatory
        "placeholder": "Search as you type...", // Default: ""
        "maxSuggestions": 10,                   // Default: 5
        "hotKeys": [],                          // Default: ['s', '/']
        "cropLength": 50                        // Default: 30
      }
    ],
  ],
}

Scrap your content

To use this plugin, your need:

• a MeiliSearch instance running in production.
• a scraping tool that scraps your Vuepress pages on regular bases.

Your MeiliSearch Instance

This step has to be done on your side: MeiliSearch is open-source and can run on your own server! 😄

Here is the documentation to install and run MeiliSearch.

A tutorial about how to run MeiliSearch in production is coming...

Your scraper

We already provide a scraper for your website: docs-scraper.
This scraper is used in production on the MeiliSearch documentation.

All the steps to use it are detailled in the scraper repository.
You can easly run the scraper with Docker or in a GitHub Action. The best would be to run the scraper on each website deployment.

Development Workflow

Install

$ yarn install

Tests and Linter

$ yarn run test
$ yarn run lint

Release

MeiliSearch tools follow the Semantic Versioning Convention.

You must do a PR modifying the file package.json with the right version.

"version": X.X.X

Once the changes are merged on master, in your terminal, you must be on the master branch and push a new tag with the right version:

$ git checkout master
$ git pull origin master
$ git tag vX.X.X
$ git push --tag origin master

A GitHub Action will be triggered and push the package on npm.

Related repositories

• docs-searchBar.js: the library used to display the dropdown of this plugin. It can be useful if you want a search bar for your documentation but you don't use vuepress.
• docs-scraper: the scraper used to scrap websites pages and automatically index the content in MeiliSearch.