Home

Awesome

MeiliSearch Manager (meili-manager)

This is Meili-Manager, a Quasar app built to help manage your Meilisearch instance(s). You can run this locally or hosted. Currently the demo is at https://meili-manager.vercel.app/#/

Full readme below the quickstart.

Quick start

Install the dependencies

npm install
npm install -g @quasar/cli

Start the app in development mode (hot-code reloading, error reporting, etc.)

quasar dev

Lint the files

yarn lint
# or
npm run lint

Format the files

yarn format
# or
npm run format

Build the app for production

quasar build

Customize the configuration

See Configuring quasar.config.js.

Overview

What is this

This is Meili-Manager, a Quasar app built to help manage your Meilisearch instance(s). You can run this locally or hosted. Currently the demo is at https://meili-manager.vercel.app/#/

Dependancies

The npm install step should install everything you need, but certain packages are important to mention. Critical to this app's function are

Features

No more manual API calls to change settings!

Installation

To install you can follow the quickstart above, or host this app on the service of your choice. The demo is hosted on vercel, with the following settings:

You can also follow the quasar docs to compile this app for the platform of your choosing:

Customization

PLEASE fork this and make it your own. I make no promises to maintain this over the years. All you need are vue3 (And all that implies) and the quasar docs to customize this.

Vue Instantsearch is used heavily when viewing results. See their showcase for all the things.

Sidebar settings

Credentials

By clicking the hamburger button in the top left, or bottom left, you can expand the sidebar settings.

Your Index url needs to be in the form of https://myIndex.com - This can be local. You API key will require the indexes.get and document.get permissions at the least to work with this tool. I recommend making a key with most permissions for a short time while you configure to your liking, then let it expire in favor of more strict keys.

Once submitted, a notification will display if any serious errors occured. If you don't immediately see a list of indexes, then your permissions aren't wide enough or your credentials are incorrect.

Endpoints/Methods used

Home page / Index list page

Data shown in the list

Here you will see a list of your indexes with their created and updated time stamps, a button to examine each, and a button to delete each.

The delete icon will give a warning that needs confirmation before it sends the delete call.

Endpoints/Methods used

Index detail page

Top Card

Overview Tab

In the overview tab you can see the results of the getStats endpoint in a friendly way.

The table is limited to 1000 fields

Settings Tab

In the settings tab you can review and update all of the settings about an index. The settings object is displayed in full (And real time) if you expand the Raw Settings JSON section at the top. This is a read only view, but may be easier to understand at first than the full form.

Pleasepleaseplease follow the link there for the settings documentation- each field has it's own purpose that needs to be understood.

While the form is stored in your local memory- it is not pushed to your meilisearch instance until you press the "Submit" button, for safety.

Instant Search demo area

Below the top card you can interact with the index documents. There is a "New" button to create an example document. This is not the recommended way to add documents.

The statistics shown are produced from the Vue Instantsearch components.

The search query is a default Vue Instantsearch component pointed at the current index.

The sort options are derived from the attributes in the sortable attributes setting.

The current refinements area will display any filters selected.

Between the refinements and the document list, there is a dynamic filter area. Whatever attributes you have in your filterable attributes will be displayed here as simple default filter widgets.

Result Cards

Each card header displays the documents "name" field value, if present, and an "EDIT" button.

The edit button will take you to a full featured JSON editor, just as creating a new record would. Any incorrect json data will be rejected, and the form reloaded.

The body of the cards will display an image, and the fields of the document in a table. Any nested or complex fields will be shown as a JSON string. Use the "EDIT" button to better examine complex documents.

The image displayed will be assumed to be a URL in a one of three fields (First one populated is used):

Endpoints/Methods used

Document detail page

Overview

The document detail page can update your documents via raw json. The json editor used has all the features you could ever need, including JMESpath query language. See vue3-ts-jsoneditor for full documentation.

Endpoints/Methods used

Keys page

Overview

Similar to the settings tab, you can review the entire response of the getKeys endpoint by clicking the "Raw Keys JSON" button.

Below that is the "New Key Form" - all fields are required. The list of available actions is static, while the list of indexes is dynamic based on your key's permissions to use the getIndexes endpoints. Wildcards are not allowed here, but can be used via direct api calls.

Please review the Keys documentation to fully understand the available settings.

The first thing you should do with your master key is create an admin key with the minimum priveleges necessary!

Endpoints/Methods used

Tasks page

Overview

The tasks page shows you a paginated, sortable, searchable table of all of the tasks as of the page loading. This table is limited to the most recent 1000 tasks.

This page is a good way to review if an index is busy, or if a particular task failed/succeeded.

Endpoints/Methods used

Preview Mode

A more detail oriented preview with the eventual goal of being sharable. Save as many preview configurations as you like and switch the index/instance powering them independently.

Settings currently available: