Search⌘ K
AI Features

Building a Shopping Cart Application with Vue

Explore how to create a shopping cart application with Vue and TypeScript by managing item quantities, calculating totals with tax and shipping, and integrating Material Design for Bootstrap. Understand component communication and state handling to build a functional e-commerce interface.

We will build a shopping cart application using the techniques that we have learned up until now with Vue. In our previous chapter, we built a product list and product details application using React, with the ability to specify how many of a particular item we would like to purchase.

This Vue application is intended to receive this information and take over the display of a shopping cart. Our Vue application will need the ability to adjust the amount of a particular item we would like to purchase, as well as calculate the total cost (including tax and shipping) that a purchase would incur.

Application overview

An overview of the components we will build is shown in the following diagram:

Logical view of Vue components for the shopping cart application
Logical view of Vue components for the shopping cart application
  • We start with the App.vue component, which will instantiate a collection of items in our shopping cart and store it as a local state property, named itemCollection ...