Nuxt 3 ecommerce site search with filtering and facets powered by Meilisearch
Meilisearch is an open-source search engine that offers fast, relevant search out of the box.
Read our Step by step guide to adding site search to your Nuxt ecommerce!
This ecommerce demo uses:
This project requires:
This projects uses icons from Heroicons and social medias icons from icons8.
Warning
Ensure that you are using a Node version compatible with the one in.nvmrc
.
Install the dependencies with PNPM:
pnpm install
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.
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 branches1-setup-database
,2-search-as-you-type
,3-advanced-search-patterns
, and4-final
, uses a different dataset and setup script.
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.
[!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.
Build the application for production:
pnpm build
Locally preview production build:
pnpm preview
Check out the deployment documentation for more information.
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
andcomponents.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.