Meilisearch + Your Stack: Build Instant Search for React, Vue, or Any Frontend in Under 30 Minutes

You've probably been there. Your app's search is powered by SQL LIKE queries, and users are typing "javascrpt" expecting to find JavaScript tutorials. The result? Nothing. Zero matches. And they bounce.

Meilisearch fixes this in a way that feels almost magical. It's a Rust-powered search engine that handles typos, synonyms, and ranking out of the box. And the best part? You can have it running with your React or Vue frontend in under 30 minutes.

Let me show you how.

Why Meilisearch Over Elasticsearch or Algolia?

Elasticsearch is powerful but notoriously complex to configure. Algolia is fantastic but starts at $35/month for 10,000 searches and scales quickly into hundreds of dollars.

Meilisearch hits a sweet spot:

Deploy Meilisearch on Elestio

Skip the Docker configuration headaches. Deploy Meilisearch on Elestio with a few clicks:

1. Select Meilisearch from the marketplace
2. Choose your provider (Netcup, Hetzner, DigitalOcean)
3. Pick a region close to your users
4. Click Deploy

Your instance will be ready in about 3 minutes. You'll get a URL like meilisearch-abc123.vm.elestio.app and your API keys in the dashboard.

Cost: Starting at $14/month (2 CPU, 4GB RAM, fully managed). That's it. No per-search pricing, no surprise bills.

Index Your Data

Once deployed, access your Meilisearch container:

docker exec -it meilisearch bash

Or use the API directly. Here's how to create an index and add documents:

curl -X POST 'https://your-instance.vm.elestio.app/indexes/products/documents' \
  -H 'Authorization: Bearer YOUR_MASTER_KEY' \
  -H 'Content-Type: application/json' \
  --data-binary '[
    {"id": 1, "name": "Mechanical Keyboard", "category": "Electronics", "price": 149},
    {"id": 2, "name": "Wireless Mouse", "category": "Electronics", "price": 79},
    {"id": 3, "name": "USB-C Hub", "category": "Accessories", "price": 45}
  ]'

Meilisearch automatically indexes all fields and makes them searchable. No schema definition required.

React Integration with InstantSearch

Meilisearch provides official React components that make integration trivial:

npm install @meilisearch/instant-meilisearch react-instantsearch

Create your search component:

import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';
import { InstantSearch, SearchBox, Hits } from 'react-instantsearch';

const searchClient = instantMeiliSearch(
  'https://your-instance.vm.elestio.app',
  'YOUR_SEARCH_API_KEY'
);

function ProductSearch() {
  return (
    <InstantSearch indexName="products" searchClient={searchClient}>
      <SearchBox placeholder="Search products..." />
      <Hits hitComponent={Hit} />
    </InstantSearch>
  );
}

function Hit({ hit }) {
  return (
    <div className="hit">
      <h3>{hit.name}</h3>
      <p>{hit.category} - ${hit.price}</p>
    </div>
  );
}

That's genuinely all the code you need. Type "keybord" (misspelled) and it still finds "Mechanical Keyboard."

Vue Integration

Vue developers, same deal:

npm install @meilisearch/instant-meilisearch vue-instantsearch

<template>
  <ais-instant-search :search-client="searchClient" index-name="products">
    <ais-search-box placeholder="Search products..." />
    <ais-hits>
      <template #item="{ item }">
        <h3>{{ item.name }}</h3>
        <p>{{ item.category }} - ${{ item.price }}</p>
      </template>
    </ais-hits>
  </ais-instant-search>
</template>

<script setup>
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';
import { AisInstantSearch, AisSearchBox, AisHits } from 'vue-instantsearch/vue3/es';

const searchClient = instantMeiliSearch(
  'https://your-instance.vm.elestio.app',
  'YOUR_SEARCH_API_KEY'
);
</script>

Configure Searchable Attributes

By default, Meilisearch searches all fields. For better performance and relevance, specify which fields matter:

curl -X PATCH 'https://your-instance.vm.elestio.app/indexes/products/settings' \
  -H 'Authorization: Bearer YOUR_MASTER_KEY' \
  -H 'Content-Type: application/json' \
  --data-binary '{
    "searchableAttributes": ["name", "category", "description"],
    "filterableAttributes": ["category", "price"],
    "sortableAttributes": ["price", "name"]
  }'

Now you can filter and sort:

<InstantSearch indexName="products" searchClient={searchClient}>
  <SearchBox />
  <RefinementList attribute="category" />
  <SortBy
    items={[
      { label: 'Price (low to high)', value: 'products:price:asc' },
      { label: 'Price (high to low)', value: 'products:price:desc' }
    ]}
  />
  <Hits hitComponent={Hit} />
</InstantSearch>

Troubleshooting

Search returns no results after adding documents

Meilisearch indexes asynchronously. Check the task status:

curl 'https://your-instance.vm.elestio.app/tasks' \
  -H 'Authorization: Bearer YOUR_MASTER_KEY'

Wait for status: succeeded before querying.

CORS errors in the browser

Your Meilisearch instance needs to allow your frontend origin. On Elestio, configure this in the environment variables through the dashboard, or access the container:

docker exec -it meilisearch bash
# Edit config to add MEILI_HTTP_ADDR and allowed origins

API key not working

Use the Search API key for frontend code, never the Master key. The Master key is for admin operations only.

What's Next?

You now have production-ready instant search. Some ideas to explore:

• Add synonyms so "laptop" also finds "notebook"
• Implement faceted search for e-commerce filtering
• Set up geo-search for location-based results
• Use the ranking rules to boost certain products

The Meilisearch documentation covers all of these. And if you want to skip the infrastructure management entirely, Elestio handles updates, backups, and monitoring so you can focus on building features.

Thanks for reading!