How I Built a Vue.js Ecommerce Store with a Node.js Backend

Read Time:10 Minute, 5 Second

Ecommerce is no small undertaking. Aside from building a great customer experience on the frontend, you’ll also need to have the right setup to handle all cart, customer and order data, product information, etc…

In this tutorial, you’ll get a sneak peek into how it can be done!

In this tutorial, you’ll get set up with the necessary prerequisites for a great ecommerce experience. Vue.js is a great choice for a frontend framework because it’s open source, it has a component-based architecture, and it is reactive.

For the backend, you’ll learn how to use Medusa, an open source Node.js commerce engine that ships with all necessary ecommerce functionality including an easily navigatable admin system.

The full code for this Vue.js project is located in this GitHub repo. Below is a quick sneak peek of the final result.

How I Built a Vue.js Ecommerce Store with a Node.js Backend

What is Vue.js

Vue.js is an open source progressive JavaScript framework. It can be used to build a variety of types of apps, including websites, mobile apps, or desktop apps. This can be done by using Vue.js along with other platforms like Electron or Ionic.

Vue.js has been rising in popularity since it was first released due to its many advantages. It is easy to learn and use, with concise documentation and a smooth learning curve. It also has a tiny size, a reactive system, and a component-based, reusable architecture.

What is Medusa

The open-source Shopify alternative ⚡️

Medusa is the #1 open source, Node.js commerce platform on GitHub. Its composable and headless architecture allows it to be incorporated with any tech stack to build cross-platform ecommerce stores, ranging from web to android and iOS applications.

Medusa allows developers to build scalable and maintainable ecommerce stores. It ships with many advanced ecommerce features such as an admin store dashboard, product configurations, manual orders, multi-currency support, and much more. Likewise, it easily integrates with different payment, CMS, and shipping options.

Please star if you like the tool 🌟


Prerequisites

Before you start, be sure you have Node.js version 14 or above.

Create a Server with Medusa Commerce Engine

To set up the Medusa server on your local machine, follow the steps outlined in the sections below.

Install Medusa CLI Tool

Medusa CLI can be installed using npm or yarn, but this tutorial uses npm. Run the following command to install the Medusa CLI:

Enter fullscreen mode Exit fullscreen mode

Create a New Medusa Store Server

To create a new Medusa store server, run the command below:

Enter fullscreen mode Exit fullscreen mode

Note: my-medusa-store represents the project name; you can change yours to your preferred project name.

If you created a new Medusa project successfully, you should get a result similar to the screenshot below.

Image description

Test Your Medusa Server

To test your Medusa server, change to the newly created directory and run the develop command using Medusa’s CLI:

Enter fullscreen mode Exit fullscreen mode

You can test it by sending a request to localhost:9000/store/products/ which lists the available products in your store.

Medusa Admin Installation

To set up your Medusa Admin, follow the steps below.

  1. Clone the Medusa Admin repository:

Enter fullscreen mode Exit fullscreen mode
  1. Run the command below to install all necessary dependencies:

Enter fullscreen mode Exit fullscreen mode
  1. Test it:

Enter fullscreen mode Exit fullscreen mode

By default, Medusa Admin runs on port 7000. You can go to localhost:7000 on your browser to access your admin page.

Image description

Since you included the --seed option while installing the Medusa server, a dummy admin user has been created. The email is [email protected], and the password is supersecret.

With the Medusa Admin, you can create new products and collections for your store. You can also edit, unpublish, duplicate and delete products from the admin.

You can visit the User Guide to learn more about Medusa Admin.

Image description

Create a New Vue.js Project

The next thing is to create and set up a new Vue.js project for the ecommerce project. You can run this command to set up a new Vue.js project:

Enter fullscreen mode Exit fullscreen mode

This command will install and execute create-vue, the official Vue project scaffolding tool. You will be presented with prompts for a number of optional features such as TypeScript and testing support.

Image description

Ensure you choose the same option as the ones in the above screenshot.

Once the project is created, use the following commands to install the necessary dependencies:

Enter fullscreen mode Exit fullscreen mode

Tailwind CSS Installation

Tailwind CSS is a CSS framework that allows you to effortlessly style your ecommerce storefront. In this tutorial, you’ll use Tailwind CSS in your Vue.js ecommerce storefront.

In the vuejs-ecommerce directory, run the following command to install Tailwind CSS:

Enter fullscreen mode Exit fullscreen mode

The above command will generate both the tailwind.config.js and postcss.config.js files in your Vue.js project.

Configure Your Template Paths

In your tailwind.config.jsfile, replace the content array with the following snippet:

Enter fullscreen mode Exit fullscreen mode

Add the Tailwind Directives to your CSS

Go to src/assets/main.css and replace the entire code with the snippet below:

Enter fullscreen mode Exit fullscreen mode
  • The baselayer handles things like reset rules or default styles applied to plain HTML elements.
  • The components layer handles class-based styles that you want to be able to override with utilities.
  • The utilities layer handles small, single-purpose classes that should always take precedence over any other styles.

You can visit Tailwind CSS documentation to learn more.

Integrate Vue.js Ecommerce Storefront with Medusa

In this section, you’ll prepare to integrate the Vue.js ecommerce storefront with the Medusa server to interact with APIs later on.

Create a Base URL Environment Variable

The baseURL environment variable is the URL of your Medusa server. Create a .env file in the vuejs-ecommerce directory with the following content:

Enter fullscreen mode Exit fullscreen mode

Note: If for any reason, you changed the default port number of your Medusa Server, you must change the 9000 to your port number here.

Install Axios in the Vue.js Project

You’ll use Axios to send requests to your Medusa server. You can install Axios by running the following command:

Enter fullscreen mode Exit fullscreen mode

Now that Axios is installed, the next step is integrating Medusa API into your project.

Creating Components for Your Vue.js Project

In this section, you will create components such as Header, Footer, and Products components. These components will be used on different pages of your storefront.

In some components images are used to implement a better design for the storefront. You can find all images used for this project in the GitHub repository.

Page Header Component

Create the file src/components/PageHeader.vue and add the following code to it:

Enter fullscreen mode Exit fullscreen mode

The above code block covers the header page of this project. It includes the page routes, website name, and shopping cart icon.

This component will be added later in src/App.vue of this project to add a header on every page of this storefront.

Footer Component

Create the file src/components/FooterComponent.vue with the following content:

Enter fullscreen mode Exit fullscreen mode

In the above component, you covered everything about the footer page of this ecommerce app. You’ll use it later across your pages where you want to add a footer.

Products Component

Create the file src/components/Products.vue with the following content:

Enter fullscreen mode Exit fullscreen mode

The product component is where the products are fetched using Medusa’s APIs. fetchProducts method is used to fetch products from the Medusa Server. Notice how you use the baseURL defined in the .env file.

In addition, the Vue router is being used to route each selected product to a single product page which you’ll add later.

Creating Vue.js Router File for Routing Pages

The next thing to do is to create a router file for routing our pages. By default, a route file is always generated when creating the vue.js project. Find the src/router/index.js file and replace the code inside with the below content:

Enter fullscreen mode Exit fullscreen mode

In the above component, you specified all your routes, including the route path, name, and components. The routes you added are for the homepage, products page, and single product page.

Create Storefront Pages

In this section, you’ll create pages for your storefront. Before you start creating these pages, go to src/App.vue and replace the code with the following:

Enter fullscreen mode Exit fullscreen mode

Here, you import the header component so that it appears on all pages.

You also add some methods related to the cart. The checkCartID method checks on page load if there’s a cart ID in the local storage, and if so calls the getCartID method. The getCartID method is used to fetch cart and its items from the Medusa server.

The addP method is used to add products to your store cart. It will be called later on the Single Product page.

You can learn more about Medusa carts in the documentation.

Homepage View

Create the file src/views/HomeView.vue with the following content:

Enter fullscreen mode Exit fullscreen mode

You import the Products and FooterComponent components inside this file and display them on the Homepage.

Products Page View

Create the file src/views/ProductView.vue with the following content:

Enter fullscreen mode Exit fullscreen mode

You also import the Products and FooterComponent components inside this file to display them in the Products listing page.

Single Product Page

Create the file src/views/SingleProductView.vue with the following content:

Enter fullscreen mode Exit fullscreen mode

In the above code block, you are fetching a single product from the Medusa server using its id. Then, you display the product’s information including its price, size, and description.

When the Add to Cart button is clicked, the addProduct method is executed. This method calls the addP method defined in src/App.vue passing it the selected variant ID.

Change Vue.js Port

In the vite.config.jsfile, add this code snippet inside the object parameter passed todefineConfig:

Enter fullscreen mode Exit fullscreen mode

In the above code block, you change the port of the Vue.js ecommerce storefront to 8000. This allows you to avoid cors issues when sending requests to the Medusa server.

Test the Storefront

You can now test your Vue.js ecommerce storefront with the following steps:

  1. Run the Medusa server:

Enter fullscreen mode Exit fullscreen mode
  1. Run the Vue.js app:

Enter fullscreen mode Exit fullscreen mode

When you open the storefront on localhost:8000, you’ll see the following home page:

Image description

If you scroll down or click on the Products item in the navigation bar, you’ll see products populated from your Medusa server.

Image description

Try clicking on any of the products, a new page will open showing the products details.

Image description

You can add the product to the cart by clicking the “Add to Cart” button.

What’s Next?

In this tutorial, you learned how to create a Vue.js Ecommerce storefront with the help of Medusa. This storefront only implements the product listing and add-to-cart functionality, but there’s much more to add to your storefront.

Check out the following documentation pages for help on how to move forward:

Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via Discord

Source: https://dev.to/medusajs/how-i-created-a-vuejs-ecommerce-store-with-medusa-plf

CyberSEO Pro - OpenAI GPT-3 autoblogging and content curation plugin for WordPress

Tag Cloud

Java Java Logical Programs OTP Generation in Java python Recursion youtube video ASCII Upper and Lower Case blockchain javascript graph learn to code software development Successful Software Engineers breadth first search Java Array Programs Java Programs Uncategorized android ios programming kotlin web-development django data sql cybersecurity database swiftui serverless aws swift rust react background-position gradients loader mask grid nth-child pseudo elements indieweb WordPress Print Array without brackets C++ factorial Java String Programs Final Keyword Static Variable Axie Infinity Cryptokitties NFT games tool inserting MISC Tips Codes python code python projects python3 system info python project Bigginers How to Do Integrations Payment Gateways PHP checkout page in php Implement stripe payment gateway in Step by step in PHP integrate stripe gatway in php mysql payment gateway integration in php step by step payment gateway integration in php step by step with source code payment gateway integration in website PHP Integrate Stripe Payment Gateway Tutorial PHP shopping cart checkout code shopping cart in php stripe php checkout PHP/MySQL/JSON best international payment gateway does google pay accept international payments how to accept international payments in india paytm payment gateway razorpay codeigniter github razorpay custom checkout github razorpay get payment details razorpay integration in codeigniter github razorpay international payments Razorpay payment gateway integration in CodeIgniter razorpay payment gateway integration in php code Razorpay payment gateway integration with PHP and CodeIgniter Razorpay payment gateway setup in CodeIgniter Library & Frameworks Tips & Tricks UI/UX & Front-end coding birds online html code for google sign in login with google account in PHP login with google account using javascript login with google account using javascript codeigniter login with google account using php login with google account using php source code
Adding Box Shadows to WordPress Blocks and Elements Previous post Adding Box Shadows to WordPress Blocks and Elements
Web resource caching: Server-side Next post Web resource caching: Server-side

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.