Home

Awesome

<p align="center"> <a href="https://www.meilisearch.com/?utm_campaign=ecommerce-demo&utm_source=github&utm_medium=readme" target="_blank"> <img src="https://github.com/meilisearch/meilisearch/blob/main/assets/logo.svg" alt="Meilisearch" width="200" height="200" /> </a> </p> <h1 align="center">Meilisearch Nuxt 3 ecommerce demo</h1> <h4 align="center"> <a href="https://www.meilisearch.com/?utm_campaign=ecommerce-demo&utm_source=github&utm_medium=readme">Website</a> | <a href="https://www.meilisearch.com/cloud?utm_campaign=ecommerce-demo&utm_source=github&utm_medium=readme">Meilisearch Cloud</a> | <a href="https://blog.meilisearch.com/?utm_campaign=ecommerce-demo&utm_source=github&utm_medium=readme">Blog</a> | <a href="https://www.meilisearch.com/docs/?utm_campaign=ecommerce-demo&utm_source=github&utm_medium=readme">Documentation</a> | <a href="https://discord.meilisearch.com/?utm_campaign=ecommerce-demo&utm_source=github&utm_medium=readme">Discord</a> </h4> <p align="center"> <a href="https://github.com/meilisearch/demo-movies/blob/main/LICENCE"><img src="https://img.shields.io/badge/license-MIT-informational" alt="License"></a> </p> <br/>

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:

🧰 Stack

This project requires:

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.