Website | Meilisearch Cloud | Blog | Documentation | Discord
Read our Step by step guide to adding site search to your Nuxt ecommerce!
This project requires:
- Node 18
- Yarn β Node.js packages 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.
Warning Ensure that you are using a Node version compatible with the one in
.nvmrc
.
Install the dependencies with Yarn:
yarn install
Environment variables should hold your Meilisearch database credentials. The easiest way to launch a database is to create a free project on Meilisearch Cloud. Alternatively, you can read local installation documentation for self-hosted options.
This project loads environment variables from an .env
file. You can duplicate the existing .env.example
file and rename it as .env
. Update the content of the file 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.
Run the setup script to configure and seed your Meilisearch instance:
yarn setup
Note Make sure to complete instructions from the Setup section before running the server.
Start the development server on http://localhost:3000
yarn dev
Build the application for production:
yarn build
Locally preview production build:
yarn preview
Check out the deployment documentation for more information.
You can read more about what happens on the Nuxt config file here.
yarn deploy
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
andcomponents.d.ts
are auto-generated and should not be updated manually. You can commit them into source control.