Skip to content

meilisearch/vuepress-plugin-meilisearch

main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Meilisearch-VuePress

Meilisearch VuePress

Meilisearch | Documentation | Slack | Roadmap | Website | FAQ

npm version GitHub Workflow Status License Bors enabled

The Meilisearch plugin for VuePress

Meilisearch VuePress is a Meilisearch plugin for VuePress.

Meilisearch is an open-source search engine. Discover what Meilisearch is!

If you don't use VuePress for your documentation, but you still need a search bar, you might check out this front-end SDK.

Meilisearch docs demo.

This plugin is used in production on the Meilisearch documentation.

Table of Contents

Usage

Before using the plugin

The goal of this plugin is to provide very easy integration of a search bar into your own VuePress documentation. To make that possible, you need to gather your website content in advance, and index it in a Meilisearch instance.

Luckily, we provide all the tools that you need, and can help you through the whole process, if you follow this guide 🚀

As a first introduction, you might only want to test this plugin without connecting it to your website.
You can do it by running the VuePress playground provided in this repository:

yarn install
yarn playground

Then, open your browser on the indicated URL and test the search bar 🙂

The data comes from Meilisearch documentation.
Type create an indxe to live the Meilisearch experience with the typo tolerance.

Installation

In your VuePress project:

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

Basic Configuration

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 recommend providing 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
        layout: 'simple', // Default: "columns"
        debug: true, // Default: false
        enableDarkMode: 'auto' // Default: false
      }
    ]
  ]
}

Dark mode

You can enable dark mode by adding enableDarkMode: 'auto' to your configuration file.

To override the default theme of the search bar, you can edit your .vuepress/styles/palette.styl file.
A few variables are available:

$accentDarkColor
$inputDarkBgColor
$textDarkColor
$borderDarkColor
$dropdownBgDarkColor

You can also find an example in our playground's palette.styl file

Compatibility with Meilisearch

This package only guarantees the compatibility with the version v0.28.0 of Meilisearch.

Development Workflow and Contributing

Any new contribution is more than welcome in this project!

If you want to know more about the development workflow or want to contribute, please visit our contributing guidelines for detailed instructions!

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.

Meilisearch provides and maintains many SDKs and Integration tools like this one. We want to provide everyone with an amazing search experience for any kind of project. If you want to contribute, make suggestions, or just know what's going on right now, visit us in the integration-guides repository.