Requirements
This guide requires:- A Laravel 10 application with Laravel Scout configured to use the
meilisearch
driver - A Meilisearch server running — see our quick start
- A search API key — available in your Meilisearch dashboard
- A search API key UID — retrieve it using the keys endpoints
Prefer self-hosting? Read our installation guide.
Models & relationships
Our example CRM is a multitenant application, where each user can only access data belonging to their organization. On a technical level, this means:- A
User
model that belongs to anOrganization
- A
Contact
model that belongs to anOrganization
(can only be accessed by users from the same organization) - An
Organization
model that has manyUser
s and manyContact
s
app/Models/Contact.php
:
app/Models/User.php
:
app/Models/Organization.php
:
Generating tenant tokens
Currently, allUser
s can search through data belonging to all Organizations
. To prevent that from happening, you need to generate a tenant token for each organization. You can then use this token to authenticate requests to Meilisearch and ensure that users can only access data from their organization. All User
within the same Organization
will share the same token.
In this guide, you will generate the token when the organization is retrieved from the database. If the organization has no token, you will generate one and store it in the meilisearch_token
attribute.
Update app/Models/Organization.php
:
Organization
model is generating tenant tokens, you need to provide the front-end with these tokens so that it can access Meilisearch securely.
Using tenant tokens with Laravel Blade
Use view composers to provide views with your search token. This way, you ensure the token is available in all views, without having to pass it manually.If you prefer, you can pass the token manually to each view using the
with
method.app/View/Composers/AuthComposer.php
file:
AppServiceProvider
:
meilisearchToken
variable. You use this variable in your front end.
Building the search UI
This guide uses Vue InstantSearch to build your search interface. Vue InstantSearch is a set of components and helpers to build a search UI in Vue applications. If you prefer other flavours of JavaScript, check out our other front-end integrations. First, install the dependencies:resources/js/vue-app.js
file:
Meilisearch
component you will create next.
The Meilisearch
component is responsible for initializing a Vue Instantsearch client. It uses the @meilisearch/instant-meilisearch
package to create a search client compatible with Instantsearch.
Create it in resources/js/components/Meilisearch.vue
:
Meilisearch
component it in any Blade view by providing it with the tenant token. Don’t forget to add the @vite
directive to include the Vue app in your view.