Search is the heartbeat of modern SaaS. Whether it’s finding users, filtering invoices, or browsing product catalogs, developers know that slow or clunky search kills user experience.
By 2025, the combo of Laravel Scout + Typesense has emerged as one of the cleanest ways to deliver instant, typo‑tolerant, faceted search — without the complexity of Elasticsearch or the limitations of Meilisearch.
🚀 Why Typesense?
Typesense is an open‑source search engine built for speed and simplicity:
- Blazing fast: Written in C++, optimized for instant responses.
- Typo tolerance: Handles misspellings gracefully.
- Faceted search: Perfect for SaaS dashboards and product catalogs.
- Free & open source: No licensing headaches.
- Easy scaling: Horizontal scaling with replicas and sharding.
Compared to Meilisearch, Typesense often wins in:
- Memory efficiency (handles larger datasets without choking).
- Advanced filtering (better support for complex queries).
- Production stability (battle‑tested for high‑traffic apps).
🛠️ Step 1: Install Laravel Scout
Scout is Laravel’s official driver‑based search abstraction.
composer require laravel/scout
Publish the config:
php artisan vendor:publish --provider="Laravel\Scout\ScoutServiceProvider"
📊 Step 2: Add the Typesense Driver
Install the community driver:
composer require typesense/laravel-scout-typesense-driver
Configure config/scout.php:
'driver' => 'typesense',
'typesense' => [
'api_key' => env('TYPESENSE_API_KEY'),
'nodes' => [
[
'host' => env('TYPESENSE_HOST', 'localhost'),
'port' => env('TYPESENSE_PORT', '8108'),
'protocol' => env('TYPESENSE_PROTOCOL', 'http'),
],
],
'nearest_node' => [
'host' => env('TYPESENSE_HOST', 'localhost'),
'port' => env('TYPESENSE_PORT', '8108'),
'protocol' => env('TYPESENSE_PROTOCOL', 'http'),
],
],
🎨 Step 3: Make Your Model Searchable
Add the Searchable trait to your Eloquent model:
namespace App\Models;
use Laravel\Scout\Searchable;
use Illuminate\Database\Eloquent\Model;
class Invoice extends Model
{
use Searchable;
public function toSearchableArray()
{
return [
'id' => $this->id,
'customer_name' => $this->customer_name,
'amount' => $this->amount,
'status' => $this->status,
];
}
}
⚡ Step 4: Index & Search
Index your data:
php artisan scout:import "App\Models\Invoice"
Search instantly:
$results = Invoice::search('john doe')->get();
Typesense will return typo‑tolerant, faceted results in milliseconds.
🔧 Step 5: Advanced Features
- Faceted Filters: Perfect for SaaS dashboards.
Invoice::search('john')->where('status', 'paid')->get(); - Geo Search: Great for location‑based SaaS.
- Synonyms: Map “refund” → “reversal” for smarter search.
🎨 Step 6: Frontend Integration with Vue.js
Once your Laravel backend is indexing data into Typesense, you can expose a search API endpoint (e.g., /api/search) that queries Scout and returns JSON results. The frontend can then consume this endpoint with Vue.
Example: Vue 3 + Composition API
<template>
<div class="search-container">
<input
v-model="query"
@input="searchInvoices"
placeholder="Search invoices..."
class="search-input"
/>
<ul v-if="results.length" class="search-results">
<li v-for="invoice in results" :key="invoice.id">
<strong>{{ invoice.customer_name }}</strong>
— {{ invoice.status }} (₹{{ invoice.amount }})
</li>
</ul>
<p v-else-if="query">No results found.</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
import axios from 'axios'
const query = ref('')
const results = ref([])
const searchInvoices = async () => {
if (!query.value) {
results.value = []
return
}
try {
const { data } = await axios.get('/api/search', {
params: { q: query.value }
})
results.value = data
} catch (error) {
console.error('Search failed:', error)
}
}
</script>
<style>
.search-container { max-width: 600px; margin: auto; }
.search-input { width: 100%; padding: 10px; font-size: 16px; }
.search-results { list-style: none; padding: 0; margin-top: 10px; }
.search-results li { padding: 5px 0; border-bottom: 1px solid #eee; }
</style>
Backend Endpoint (Laravel)
// routes/api.php
use App\Models\Invoice;
use Illuminate\Http\Request;
Route::get('/search', function (Request $request) {
$query = $request->input('q');
return Invoice::search($query)->get();
});
⚡ How It Works
- User types into the Vue input field.
- Vue calls
/api/search?q=.... - Laravel Scout + Typesense returns typo‑tolerant, faceted results.
- Vue renders them instantly in the list.
🧩 Comparing Typesense vs Meilisearch
| Feature | Typesense | Meilisearch |
|---|---|---|
| Typo tolerance | ✅ | ✅ |
| Faceted search | ✅ | Limited |
| Large dataset perf | ✅ | Struggles |
| Memory efficiency | ✅ | Higher usage |
| Ecosystem maturity | ✅ | Growing |
🌐 Real‑World Example: SaaS Dashboard
Imagine a SaaS invoicing app:
- Search invoices by customer name (typo‑tolerant).
- Filter by status (paid, pending, overdue).
- Sort by amount.
- Instant results even with millions of records.
With Scout + Typesense + Vue, this takes minutes to set up — not weeks.
🔮 Looking Ahead
By 2025, Typesense has become the go‑to search engine for Laravel SaaS apps. It’s free, fast, and flexible. For many use cases, it’s simply better than Meilisearch — especially when handling large datasets or complex filters.
🧭 Final Thoughts
If your SaaS needs instant, typo‑tolerant, faceted search, don’t settle for clunky solutions.
Laravel Scout + Typesense gives you:
- Simplicity of Scout.
- Power of Typesense.
- Free, production‑ready search.
- Vue.js frontend integration for instant results.
Your users will thank you — and your server will breathe easier.
