DOCSEARCHbyAlgolia
Submit Docs

Meilisearch JavaScript Plugins

repository·main·Indexed 19 days ago

https://github.com/meilisearch/meilisearch-js-plugins

Specialized JavaScript clients and plugins that bridge Meilisearch with third-party search UI libraries and content platforms. Includes @meilisearch/autocomplete-client for integration with autocomplete.js and @meilisearch/instant-meilisearch for bridging Meilisearch with InstantSearch.js.

Tokens
15.7K
Snippets
55
Records
66
Agent score
68%

What's inside meilisearch-js-plugins

  1. Overview of Meilisearch Javascript plugins

    main

    This repository provides specialized clients and plugins designed to integrate Meilisearch with popular third-party frontend tools and frameworks. Instead of using the standard Meilisearch SDK directly, these plugins allow you to leverage high-level UI components and search interfaces.

    Core Plugins in this repository

    • @meilisearch/instant-meilisearch: A search client specifically built for use with instantsearch.js.
    • @meilisearch/autocomplete-client: A search client specifically built for use with autocomplete.

    Other available integrations

    Meilisearch also maintains several other plugins for CMS, static site generators, and databases:

    • Strapi: strapi-plugin-meilisearch for synchronizing Strapi collections.
    • Firestore: firestore-meilisearch for synchronizing Firebase Firestore data.
    • Gatsby: gatsby-plugin-meilisearch for indexing Gatsby content.
    • Documentation: docs-searchbar.js and vuepress-plugin-meilisearch for adding search bars to documentation sites.

  5. Enable Search Metadata for Self-hosted Meilisearch

    main

    For self-hosted Meilisearch instances, search metadata is not enabled by default. You must include the Meili-Include-Metadata: true header in your requests. You can configure this via the options.requestConfig.headers property when initializing the meilisearchAutocompleteClient.

    const searchClient = meilisearchAutocompleteClient({
  url: 'http://localhost:7700',
  apiKey: 'your-api-key',
  options: {
    requestConfig: {
      headers: {
        'Meili-Include-Metadata': 'true'
      }
    }
  }
})

  6. Enable Volar Take Over Mode for better performance

    main

    If the standalone TypeScript plugin is slow, you can enable Volar's Take Over Mode to make the TypeScript language service aware of .vue types more efficiently.

    Follow these steps in VS Code:

    1. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P).
    2. Run Extensions: Show Built-in Extensions.
    3. Find TypeScript and JavaScript Language Features, right-click it, and select Disable (Workspace).
    4. Open the Command Palette again and run Developer: Reload Window to apply changes.

  12. Integrate @meilisearch/instant-meilisearch with InstantSearch.js

    main

    You can use @meilisearch/instant-meilisearch to bridge the Meilisearch engine with the InstantSearch.js library.

    To set it up:

    1. Initialize the plugin using instantMeiliSearch(host, apiKey) to obtain a searchClient.
    2. Pass this searchClient into the instantsearch() constructor along with the indexName (the Meilisearch index uid).
    3. Add widgets (like searchBox and hits) using search.addWidgets().
    4. Call search.start() to begin the search lifecycle.

    Note: The indexName must match the exact uid of your Meilisearch index.

    <script type="module">
  import { instantMeiliSearch } from 'https://unpkg.com/@meilisearch/instant-meilisearch'
  import 'https://unpkg.com/instantsearch.js'

  // 1. Initialize the client
  const { searchClient } = instantMeiliSearch(
    'https://your-meilisearch-host.com',
    'your-api-key'
  )

  // 2. Create the InstantSearch instance
  const search = instantsearch({
    indexName: 'your-index-uid',
    searchClient,
  })

  // 3. Add widgets
  search.addWidgets([
    instantsearch.widgets.searchBox({
      container: '#searchbox',
    }),
    instantsearch.widgets.hits({
      container: '#hits',
      templates: {
        item: `<div>{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}</div>`,
      },
    }),
  ])

  // 4. Start
  search.start()
</script>