πͺ Looking to build this yourself?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:
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:
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.
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
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:
Locally preview production build:
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:
Output files
auto-imports.d.tsandcomponents.d.tsare auto-generated and should not be updated manually. You can commit them into source control.
Learn more about configuring Storybook for Nuxt.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4