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:

• 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"

# Meilisearch credentials for setup
MEILISEARCH_ADMIN_API_KEY="use the Default Admin API Key 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 \
  --index YOUR_INDEX \
  --primary-key id \
  --api-key YOUR_ADMIN_KEY \
  --files database/dataset.jsonl

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

pnpm setup

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.

🧑‍💻 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.