When I first started to use Meilisearch with Laravel Scout, I wanted to query an Eloquent relationship along with my search. Like everything with Laravel, there was already a solution available. In this tutorial we will expand on the Laravel documentation and provide a few examples of how to include an Eloquent relationship’s model with a Meilsearch indexed record.

Prerequisite

I’m going to assume you already have a properly functioning Meilisearch instance up and running. Along with that, I’m going to assume you are using Laravel Scout with Laravel 9. However, this will work with older versions of Laravel if needed.

This is a really quick article, but is something I implement on most of my Meilisearch instances. The ability to search an index and get important related fields will make the UX of your app so much nicer!

Why would you do this?

Say you have an index of customers. Each of those customers has multiple email addresses. The email addresses are located in a related table in your database, say customer_email_addresses. When you search for customers with Laravel Scout in your app, allowing the user to search by an email address is crucial. If the email addresses are in a different table, no results would be returned. Luckily, there’s a simple solution to include these relationships in your Meilisearch index.

There’s only a slight difference in how to reference environment variables from Nuxt 2 to Nuxt 3. Nuxt 3 provides a simple composable that you can include in your setup() method. Nuxt 2 set the environment variables in a global $config variable. The functionality is similar, but the syntax is slightly different, let’s take a […]

When migrating from Nuxt 2 to Nuxt 3, setting page titles is slightly different. In Nuxt 2 setting page meta data is done through the head() helper function. Or, if you define a title globally, you could set it in the nuxt.config.js. In Nuxt 3, page titles are set through the useMeta() composable function or […]

A notification component is a super useful, re-usable component that I add to most web apps. I use this component to communicate with the user when an action has been completed, or something needs to be brought to their attention. I like to design this component globally so I can call it from anywhere within the application. In this tutorial we will be designing a simple Vue 3 notification component to display a success, warning, and failure notification to the user. You can style this notification however you like. We will just be focusing on the functionality.

One of the first steps I did when migrating from Nuxt 2 to Nuxt 3 was to migrate my app’s layout. Since the layout was essentially the shell of my application, I figured this was a good place to start. Remember, we aren’t using Nuxt bridge and doing a straight Nuxt 2 to Nuxt 3 […]