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
• Yarn 3 — Node.js package manager
• Nuxt 3 — Web application framework based on Vue 3
• Meilisearch — Fast, relevant 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 Yarn 3:

yarn install

Environment

Environment variables should hold your Meilisearch database credentials. The easiest way to launch a database is to create a project on Meilisearch Cloud. Alternatively, you can read local installation documentation for self-hosted options.

This project loads environment variables from an .env file. Copy .env.example file as .env and update the file’s content to match your credentials.

# .env

# Meilisearch configuration
MEILISEARCH_HOST="use the Database URL here"
MEILISEARCH_ADMIN_API_KEY="use the Default Admin API Key here"
MEILISEARCH_SEARCH_API_KEY="use the Default Search API Key here"

# Image optimization configuration
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

This projects comes with a setup script: database/setup.js. This script seeds a products index using the dataset in database/data.json.

This sample dataset is used the tutorial, which pertains to the code on branches 1-setup-database, 2-search-as-you-type, 3-advanced-search-patterns, and 4-final.

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

yarn setup

Note
The live demo uses a different dataset and Meilisearch instance. The main branch is the reference for this site.

🧑‍💻 Development

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

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

yarn dev

🚀 Deployment

Build the application for production:

yarn build

Locally preview production build:

yarn 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:

yarn 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.