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.