Build an Online Shop with Vue

Our Task

Our task is not a very simple one. This is good because we will end up digging topics that are not common in your day to day web activities. Nothing to worry about -- we will discuss these topics and be sure they are clear enough.

The Project

A basic e-commerce application should at least have the following:

  • Products listing

  • Product Details IMAGE HERE

  • Cart (Add, Remove, and Listing) IMAGE HERE

  • Admin Section (CRUD for Products) IMAGE HERE

Vue Features

We will account for each of those features while building the project. During this journey, you will get your hands dirty with the following concepts:

  • Components
  • Vue CLI
  • Template Syntax
  • List & Conditional Rendering
  • Events
  • Forms
  • Routing with Vue Router
  • State Management with Vuex
  • Data/API Interaction with HTTP Requests


Of course, we are building the client using Vue which is the topic of discussion. In as much as we can do with just fake/mock data for the UI, it's good to see how these things happen in reality. For that reason, we are building an API endpoint as well to back the app. The endpoint will be deployed to Heroku and can be tested using Postman

Like this article? Follow @codebeast on Twitter