Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/meilisearch/ecommerce-demo
Nuxt 3 ecommerce site search with filtering and facets powered by Meilisearch
https://github.com/meilisearch/ecommerce-demo
ecommerce faceted-search meilisearch nuxt
Last synced: 28 days ago
JSON representation
Nuxt 3 ecommerce site search with filtering and facets powered by Meilisearch
- Host: GitHub
- URL: https://github.com/meilisearch/ecommerce-demo
- Owner: meilisearch
- Created: 2023-02-01T07:55:37.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-12T15:56:11.000Z (6 months ago)
- Last Synced: 2024-08-04T01:16:32.862Z (4 months ago)
- Topics: ecommerce, faceted-search, meilisearch, nuxt
- Language: Vue
- Homepage: https://ecommerce.meilisearch.com/?utm_campaign=ecommerce-demo&utm_source=github&utm_medium=website-url
- Size: 2.66 MB
- Stars: 80
- Watchers: 4
- Forks: 13
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-meilisearch - Ecommerce demo - Ecommerce website using multi-select facets, range and rating filtering, and pagination (Demos / Community Tools)
README
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](https://blog.meilisearch.com/nuxt-ecommerce-search-guide/?utm_campaign=ecommerce-demo&utm_source=github&utm_medium=readme)!
## ✨ Features
This ecommerce demo uses:
- [Faceted search](https://www.meilisearch.com/docs/learn/fine_tuning_results/faceted_search?utm_campaign=ecommerce-demo&utm_source=github&utm_medium=readme)
- [Filtering](https://www.meilisearch.com/docs/learn/fine_tuning_results/filtering?utm_campaign=ecommerce-demo&utm_source=github&utm_medium=readme)
- [Sorting](https://www.meilisearch.com/docs/learn/fine_tuning_results/sorting?utm_campaign=ecommerce-demo&utm_source=github&utm_medium=readme)
## 🧰 Stack
This project requires:
- [Node 18](https://nodejs.org/)
- [Yarn 3](https://yarnpkg.com/getting-started/install) — Node.js package manager
- [Nuxt 3](https://nuxt.com) — Web application framework based on [Vue 3](https://vuejs.org/)
- [Meilisearch](https://meilisearch.com/?utm_campaign=ecommerce-demo&utm_source=github&utm_medium=readme) — Fast, relevant search engine
This projects uses icons from [Heroicons](https://heroicons.com/) and social medias icons from [icons8](https://icons8.com/icons/collections/EnE9mEHAiX2D).
## 🛠️ Setup
### Dependencies
> **Warning**
> Ensure that you are using a Node version compatible with the one in `.nvmrc`.
Install the dependencies with Yarn 3:
```bash
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](https://meilisearch.com/cloud?utm_campaign=ecommerce-demo&utm_source=github&utm_medium=readme). Alternatively, you can read [local installation](https://www.meilisearch.com/docs/learn/getting_started/installation?utm_campaign=ecommerce-demo&utm_source=github&utm_medium=readme#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.
```bash
# .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](https://twicpics.com/) 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](https://blog.meilisearch.com/nuxt-ecommerce-search-guide/?utm_campaign=ecommerce-demo&utm_source=github&utm_medium=readme), 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:
```bash
yarn setup
```
> **Note**
> The [live demo](https://ecommerce.meilisearch.com/?utm_campaign=ecommerce-demo&utm_source=github&utm_medium=readme) 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
```bash
yarn dev
```
## 🚀 Deployment
Build the application for production:
```bash
yarn build
```
Locally preview production build:
```bash
yarn preview
```
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
## ✨ Storybook
This project uses [Storybook v7](https://storybook.js.org/) to document components. The `vite.config.ts` is used by Storybook to enable auto-imports and path aliases.
Open Storybook by running:
```bash
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](https://laurentcazanove.com/articles/storybook-nuxt-guide/).