In this module, we’re going to build an e-commerce website.

In this case, we’ll have to manage products, and the shopping cart, so we have a reasonably sized state to handle. We’ll use Vuex to help us.

We’ll also need different URLs based on the thing that’s displayed on the screen. A products list, a single product, the cart, and we’ll use the official Vue Router library to handle that.

The app will have several different screens.

One will allow us to add new products, without a full-blown administration interface. We’re not building a production-ready app so we can help us easily test things by having a quick way to add products.

Then we’ll have a products listing

and a product details page:

From there we can add items to the shopping cart, which will show up below the page menu.

When there is at least one item in the shopping cart we can check out. We’ll be using Stripe Checkout for that.

Once an order is sent, we’ll have a confirmation page.

Let’s go!

Go to the next lesson