{"id":15002297,"url":"https://github.com/marktawa/medusa-nuxt-article","last_synced_at":"2026-03-11T15:11:06.324Z","repository":{"id":221897738,"uuid":"750634046","full_name":"Marktawa/medusa-nuxt-article","owner":"Marktawa","description":"Article for an Ecommerce Website built using Nuxt, a frontend framework and Medusa, a commerce engine","archived":false,"fork":false,"pushed_at":"2024-02-24T11:06:55.000Z","size":4469,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-18T12:11:34.790Z","etag":null,"topics":["ecommerce","jamstack","medusa","nuxt","webdev"],"latest_commit_sha":null,"homepage":"https://github.com/Marktawa/medusa-nuxt","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Marktawa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"custom":"buymeacoffee.com/markmunyaka"}},"created_at":"2024-01-31T02:23:59.000Z","updated_at":"2024-08-28T22:38:28.000Z","dependencies_parsed_at":"2024-02-24T12:22:13.761Z","dependency_job_id":null,"html_url":"https://github.com/Marktawa/medusa-nuxt-article","commit_stats":null,"previous_names":["marktawa/medusa-nuxt-article"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marktawa%2Fmedusa-nuxt-article","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marktawa%2Fmedusa-nuxt-article/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marktawa%2Fmedusa-nuxt-article/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marktawa%2Fmedusa-nuxt-article/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Marktawa","download_url":"https://codeload.github.com/Marktawa/medusa-nuxt-article/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243141277,"owners_count":20242831,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ecommerce","jamstack","medusa","nuxt","webdev"],"created_at":"2024-09-24T18:49:28.150Z","updated_at":"2026-03-11T15:11:06.256Z","avatar_url":"https://github.com/Marktawa.png","language":null,"funding_links":["buymeacoffee.com/markmunyaka","https://www.buymeacoffee.com/markmunyaka"],"categories":[],"sub_categories":[],"readme":"# Building an ecommerce store using Nuxt and Medusa\n\n![Article Cover](https://res.cloudinary.com/craigsims808/image/upload/v1708526494/articles/medusa-nuxt/medusa-nuxt-cover-2_gvincb.png)\n\n## Introduction\n\nNuxt is a meta-framework built on top of Vue.js, a JavaScript library. It features SSR, SSG, SEO, File-System routing, Caching etc. It can be used to build ecommerce storefronts.\n\nMedusa is a toolkit for developers to create digital commerce applications. It uses a Node.js backend with the core API, plugins, and modules installed through npm.\n\nIn this project, you will learn how an ecommerce store can be built using Nuxt for the frontend and Medusa for the backend. To do that, first, you will create a Nuxt project and set a few components, pages and layouts. Then, you will link the Nuxt project with a Medusa server to get the store products and display them on the home page including a product's page, and a product detail page.\n\nThis tutorial is split into a series of articles:\n\n- [Part 01: Setup and Installation](https://github.com/Marktawa/medusa-nuxt-article)\n- [Part 02: Storefront Design](https://github.com/Marktawa/medusa-nuxt-article/PART-02.md) \n- [Part 03: Link Server to Storefront](https://github.com/Marktawa/medusa-nuxt-article/PART-03.md):\n- Part 04:\n\nThis tutorial is Part 01 of the series. It focuses on the set up and installation of the project.\n\n## Prerequisites\n\nTo follow along with the tutorial you need to have some knowledge of the following:\n- Basic understanding of HTML, CSS, and JavaScript\n- Basic understanding of Node.js and npm\n- Basic understanding of the command line\n- Knowledge of Vue and Nuxt is a bonus but not a requirement.\n- Knowledge of Medusa is a bonus but not a requirement.\n\nIn addition to knowing these tools, your computer system should have the following packages installed:\n- [Node.js](https://nodejs.org/en/download/) (v16 and above) \n- [PostgreSQL](https://www.postgresql.org/download/). Alternatively, you can create a free PostgreSQL database with a [Neon](https://console.neon.tech/signup) account. This tutorial will use a database created using Neon.\n- yarn (optional)\n- git (optional)\n\n## Install and setup the Medusa Backend\n\nIn this step you will install and set up the Medusa Server backend. \n\nOpen up your terminal and create a project folder to contain all the source code for the entire project. Name it `my-store`.\n\n```bash\nmkdir my-store\n```\n\n### Set up PostgreSQL on Neon\n\nIf you have PostgreSQL installed locally, you can skip this step. \n\nVisit the [Neon - Sign Up](https://console.neon.tech/signup) page and create a new account.\n\n[Create a new project](https://console.neon.tech/app/projects) in the Neon console. Give your project a name like `mystore` and your database a name like `mystoredb` then click **Create project**.\n\nTake note of your connection string which will look something like: `postgresql://dominggobana:JyyuEdr809p@df-hidden-bonus-ertd7sio.us-east-3.aws.neon.tech/mystoredb?sslmode=require`. It is in the form `postgres://[user]:[password]@[host]/[dbname]`.You will provide connection string as a database URL to your Medusa server.\n\n### Install Medusa CLI\n\nIn your terminal, inside the `my-store` folder run the following command to install the Medusa CLI. We will use it to install the Medusa server.\n\n```bash\nnpm install @medusajs/medusa-cli -g\n```\n\n### Create a new Medusa project\n\n```bash\nmedusa new my-medusa-store\n```\n\nYou will be asked to specify your PostgreSQL database credentials. Choose \"Skip database setup\".\n\nA new directory named `my-medusa-store` will be created to store the server files\n\n### Configure Database - Neon Users\n\nIf you have PostgreSQL installed locally, you can skip this step. \n\nAdd the connection string as the `DATABASE_URL` to your environment variables. Inside `my-medusa-store` create a `.env` file and add the following:\n\n```\nDATABASE_URL=postgresql://dominggobana:JyyuEdr809p@df-hidden-bonus-ertd7sio.us-east-3.aws.neon.tech/mystoredb?sslmode=require\n```\n\n### Configure Database - Local PostgreSQL DB\n\nIf you have PostgreSQL configured on Neon, you can skip this step. \n\nAccess the PostgreSQL console to create a new user and database for the Medusa server.\n\n```bash\nsudo -u postgres psql\n```\n\nTo create a new user named `medusa_admin` run this command:\n\n```sql\nCREATE USER medusa_admin WITH PASSWORD 'medusa_admin_password';\n```\n\nNow, create a new database named `medusa_db` and make `medusa_admin` the owner.\n\n```sql\nCREATE DATABASE medusa_db OWNER medusa_admin;\n```\n\nLast, grant all privileges to `medusa_admin` and exit the PostgreSQL console.\n\n```sql\nGRANT ALL PRIVILEGES ON DATABASE medusa_db TO medusa_admin;\n```\n\n```sql\nexit\n```\n\nAdd the connection string as the `DATABASE_URL` to your environment variables. Inside `my-medusa-store` create a `.env` file and add the following:\n\n```\nDATABASE_URL=postgres://medusa_admin:medusa_admin_password@localhost:5432/medusa_db\n```\n\n### Seed Database\n\nRun migrations and seed data to the database by running the following command:\n\n```bash\ncd my-medusa-store\nmedusa seed --seed-file=\"./data/seed.json\"\n```\n\n### Start your Medusa backend\n\n```bash\nmedusa develop\n```\n\nThe Medusa server will start running on port `9000`.\n\nTest your server:\n```bash\ncurl localhost:9000/store/products\n```\n\nIf it is working, you should see a list of products.\n\n## Install and Serve Medusa Admin with the Backend\n\nThis section explains how to install the admin to be served with the Medusa Backend.\n\n### Install the package\n\nInside `my-medusa-store` stop your Medusa server, `CTRL + C` and run the following command to install the Medusa Admin Dashboard.\n\n```bash\nnpm install @medusajs/admin\n```\n\nTest your install by re-running your server.\n```bash\nmedusa develop\n```\n\nOpen up your browser and visit `localhost:7001` to see the Medusa Admin Dashboard. Use the Email `admin@medusa-test.com` and password `supersecret` to log in.\n\n![Medusa Admin Dashboard](https://res.cloudinary.com/craigsims808/image/upload/v1708526486/articles/medusa-nuxt/medusa-admin-dashboard_w4uadw.png)\n\n## Install and setup the Nuxt.js storefront\n\n### Install a Nuxt.js project\n\nTo install a Nuxt project, you can get started quickly with `create-nuxt-app`. Open your terminal and run the following command:\n\n```bash\nnpx create-nuxt-app my-nuxt-storefront\n```\n\nConfigure your Nuxt project as follows:\n\n```bash\nProject name: my-nuxt-storefront\nProgramming language: JavaScript\nPackage manager: Yarn\nUI framework: Windi CSS\nTemplate engine: HTML\nNuxt.js modules: Axios - Promise based HTTP client\nLinting tools: ESLint\nTesting framework: None\nRendering mode: Single Page App\nDeployment target: Static (Static/Jamstack hosting)\nDevelopment tools: \nContinuous integration: None\nVersion control system: Git\n```\n\n### Run Nuxt.js project\n\nOnce the Nuxt.js project is created, change to the directory of the storefront and start the dev server:\n\n```bash\ncd my-nuxt-storefront\nyarn dev\n```\n\nThis command will run the storefront app by default at http://localhost:3000. To test it, open your browser and go to http://localhost:3000. You will get something like this:\n\n![Nuxt Demo Home page](https://res.cloudinary.com/craigsims808/image/upload/v1708526485/articles/medusa-nuxt/nuxt-demo-home-page_eexghl.png)\n\nLater on, you will change the default port to learn how to integrate your frontend with the Medusa server in a port that is not the default.\n\nThat's it for now!\n\n## Conclusion\n\nIn conclusion, this tutorial has covered how to set up a basic ecommerce store using Nuxt.js for the frontend and Medusa for the backend. You started by installing and configuring a Medusa backend server with a PostgreSQL database. You then installed the Medusa admin dashboard to manage products, orders, and other ecommerce functionality. Next, you created a new Nuxt.js project for the frontend storefront. Finally, you ran both the Medusa server and Nuxt development servers to test out the initial setup. In the next steps, you will integrate the Nuxt frontend with the Medusa backend, fetching product data and displaying it in pages and components to build out the complete ecommerce functionality. This tutorial provides the groundwork for building a fully-fledged ecommerce application using the powerful Nuxt and Medusa frameworks.\n\n## Resources\n- [GitHub Repo](https://github.com/Marktawa/medusa-nuxt)\n- [Source Code](https://github.com/Marktawa/medusa-nuxt/releases/tag/v1.0.0)\n\n## Author\n\n[Mark Munyaka](https://markmunyaka.com)\n\nGitHub: [@Marktawa](https://github.com/Marktawa)\nTwitter: [@McMunyaka](https://twitter.com/McMunyaka)\n\n## Sponsor\n\nSupport my passion for sharing development knowledge by making a donation to my [**Buy Me a Coffee**](https://www.buymeacoffee.com/markmunyaka) account. Your contribution helps me create valuable content and resources. Thank you for your support!\n\n[![Buy Me A Coffee Banner](https://res.cloudinary.com/craigsims808/image/upload/v1708089939/articles/test/buymeacoffee_lqmwjn.png)](https://www.buymeacoffee.com/markmunyaka)\n\n[Buy Me A Coffee](https://www.buymeacoffee.com/markmunyaka)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarktawa%2Fmedusa-nuxt-article","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarktawa%2Fmedusa-nuxt-article","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarktawa%2Fmedusa-nuxt-article/lists"}