Meilisearch Nuxt 3 ecommerce demo

Website | Meilisearch Cloud | Blog | Documentation | Discord

Meilisearch is an open-source search engine that offers fast, relevant search out of the box.

💪 Looking to build this yourself?

Read our Step by step guide to adding site search to your Nuxt ecommerce!

✨ Features

This ecommerce demo uses:

• AI-powered search for image search
• Faceted search
• Filtering
• Sorting

🧰 Stack

This project requires:

• Node 18
• PNPM — Node.js package manager
• Nuxt 3 — Web application framework based on Vue 3
• Meilisearch — Fast, relevant AI-powered search engine

This projects uses icons from Heroicons and social medias icons from icons8.

🛠️ Setup

Dependencies

Warning Ensure that you are using a Node version compatible with the one in .nvmrc.

Install the dependencies with PNPM:

pnpm install

Environment

Environment variables hold your Meilisearch database credentials. The easiest way to launch a database is to create a project on Meilisearch Cloud. Alternatively, you can read self-host Meilisearch.

This project loads environment variables from an .env file. Create an .env file and update it with your credentials.

# .env

# Meilisearch credentials for search
NUXT_PUBLIC_MEILISEARCH_HOST="use the Database URL here"
NUXT_PUBLIC_MEILISEARCH_SEARCH_API_KEY="use the Default Search API Key here"
NUXT_PUBLIC_MEILISEARCH_INDEX_NAME="use your index name here"

# Meilisearch credentials for setup
MEILISEARCH_ADMIN_API_KEY="use the Default Admin API Key here"

# OpenAI credentials for generating image description and embeddings
OPENAI_API_KEY="use your OpenAI API Key here"

# Vercel token to store images
BLOB_READ_WRITE_TOKEN="use your Vercel Blob token here"

# Image optimization configuration
NUXT_PUBLIC_TWICPICS_DOMAIN=https://meilisearch-ecommerce.twic.pics
STORYBOOK_TWICPICS_DOMAIN=https://meilisearch-ecommerce.twic.pics

This application uses TwicPics to deliver optimized images. You don’t need to update the related environment variables.

Database

Seed your database using meilisearch-importer:

meilisearch-importer \
  --url MEILISEARCH_HOST \ # Use your Meilisearch host
  --index INDEX_NAME \ # Choose an index name
  --primary-key id \
  --api-key YOUR_ADMIN_KEY \ # Use your Admin key
  --files database/dataset.jsonl

Run the setup script to configure and seed your Meilisearch instance:

pnpm setup

Tip

The tutorial, which pertains to the code on branches 1-setup-database, 2-search-as-you-type, 3-advanced-search-patterns, and 4-final, uses a different dataset and setup script.

Image description embeddings

To power image similarity search, this project generates image descriptions using gpt-4o. Meilisearch is configured to generate embeddings for these descriptions using text-embedding-3-small.

Warning

Generating descriptions and embeddings for the entire dataset is costly (more than $100 USD.)

You can generate these image descriptions by running pnpm db:gen-descriptions.

For more accurate image similarity, consider if you can use a multi-modal embedding API instead to directly generate the embeddings from the image instead.

Tip

This demo will soon be migrated to use a multi-modal embedding API.

🧑‍💻 Development

Note

Make sure to complete instructions from the Setup section before running the server.

Start the development server on http://localhost:3000

pnpm dev

Please note this project is transitioning from using custom CSS to TailwindCSS. Some code might still be using custom CSS instead of Tailwind classes.

🚀 Deployment

Build the application for production:

pnpm build

Locally preview production build:

pnpm preview

Check out the deployment documentation for more information.

✨ Storybook

This project uses Storybook v7 to document components. The vite.config.ts is used by Storybook to enable auto-imports and path aliases.

Open Storybook by running:

pnpm storybook

Output files auto-imports.d.ts and components.d.ts are auto-generated and should not be updated manually. You can commit them into source control.

Learn more about configuring Storybook for Nuxt.