Medusa Nuxt Store

Project Description

This is an ecommerce store built using Medusa as a headless commerce engine and Nuxt.js as the frontend framework.

Source Code

Medusa Nuxt Store v1.0.0

Article Link

Build an ecommerce store using Nuxt and Medusa from scratch

Prerequisites

To follow along you will need:

• Basic understanding of HTML, CSS, and JavaScript
• Basic understanding of Node.js and npm
• Basic understanding of the command line
• Knowledge of Vue and Nuxt is a bonus but not a requirement.
• Knowledge of Medusa is a bonus but not a requirement.

In addition to knowing these tools, your computer system should have the following packages installed:

• Node.js (v16 and above)
• PostgreSQL. Alternatively, you can create a free PostgreSQL database with a Neon account. This tutorial will use a database created using Neon.
• yarn (optional)
• git (optional)

Getting Started

Clone the repo.

git clone https://github.com/Marktawa/medusa-nuxt

Change directory.

cd medusa-nuxt

Medusa Setup

Install Medusa CLI.

npm install @medusajs/medusa-cli -g

Install dependencies.

cd my-medusa-store
npm install

Configure Database - Local PostgreSQL DB

Access the PostgreSQL console to create a new user and database for the Medusa server.

sudo -u postgres psql

To create a new user named medusa_admin run this command:

CREATE USER medusa_admin WITH PASSWORD 'medusa_admin_password';

Now, create a new database named medusa_db and make medusa_admin the owner.

CREATE DATABASE medusa_db OWNER medusa_admin;

Last, grant all privileges to medusa_admin and exit the PostgreSQL console.

GRANT ALL PRIVILEGES ON DATABASE medusa_db TO medusa_admin;

exit

Add the connection string as the DATABASE_URL to your environment variables. Inside my-medusa-store create a .env file and add the following:

DATABASE_URL=postgres://medusa_admin:medusa_admin_password@localhost:5432/medusa_db

Seed Database

Run migrations and seed data to the database by running the following command:

medusa seed --seed-file="./data/seed.json"

Start your Medusa backend

medusa develop

The Medusa server will start running on port 9000.

Test your server:

curl localhost:9000/store/products

Open up your browser and visit localhost:7001 to see the Medusa Admin Dashboard. Use the Email [email protected] and password supersecret to log in.

Nuxt Setup

Open up a new terminal session and open up the main project folder, my-store.

Install dependencies.

cd my-nuxt-storefront
npm install

Run Nuxt app.

npm run dev

Visit localhost:3000 in your browser to view the Nuxt app.

Author

Mark Munyaka

GitHub: @Marktawa Twitter: @McMunyaka

Sponsor

Support my passion for sharing development knowledge by making a donation to my Buy Me a Coffee account. Your contribution helps me create valuable content and resources. Thank you for your support!

Buy Me A Coffee