Building Your E-Commerce Store with Nuxt.js: A Step-by-Step Guide to Project Setup

Check this post in my web notes!

In our previous post, we laid the groundwork for our e-commerce project, discussing its structure, design considerations, and the technologies we'll employ. Now, it's time to bring our plan to life. Our journey begins with preparing the project, where we'll set up a new Nuxt.js environment and install essential libraries.

First of all, you need to be sure that Node and npm are installed on your computer. If not you can use official Node js documentation for that.

Next, we will create a new folder "e-commerce-store" for example, where we will start our project. Then launch the VS Code editor or any other editor you like to use, and open this folder.

Then we can start our project setup, for that we will use Nuxt.js official documentation. Use the command: "npx nuxi@latest init ". We already named our folder so I suggest you replace with ".", and then our new project will be created directly at the folder root and has the name as our folder. Great, we have installed the new Nuxt.js project, to make sure that everything works correctly use the command: "npm run dev", and our project dev version will be launched in the default (3000) port. Type localhost:3000 and you should see the Nuxt.js starting page.

Let's also install SASS library: "npm i sass sass-loader --save-dev".

In some cases we will need to generate unique identifiers so let's also install uuid module. For that use the command: "npm i uuid".

I think we will also need the axios library, it's very useful. Use command "npm i axios".

And the last module for today is "json-server". JSON Server is a lightweight web server that allows you to quickly create a REST API with minimal setup. It takes a JSON file as a data source and exposes endpoints for CRUD operations on that data. This makes it ideal for mocking API responses during development or testing.

To install that package we need to use the command: "npm i json-server -g", then create a db folder in our project. Inside the db folder let's create a db.json file and add some data like:

{
    "products": [
        { "id": 1, "name": "Product 1", "price": 100 },
        { "id": 2, "name": "Product 2", "price": 200 }
    ]
}

To launch our json-server we will need to use the command "json-server --watch db/db.json --port 3005". After that, we can send our CRUD requests to localhost port 3005.

In this post, we've taken the initial steps to bring our e-commerce project to life. Starting with the setup process, we ensured Node.js and npm were installed, created a new Nuxt.js project, and verified its functionality. Additionally, we introduced JSON Server for creating a REST API with minimal setup. With these foundational elements in place, we're well-equipped to proceed with building our e-commerce store. One step further and we are moving on.

If you do not want to wait for the next article from this series and want to move on, you can find the whole list of articles in my web notes.
Also, if you need a source code for this tutorial you can get it here.