The following is an implementation which demonstrates how to create a simple store with a shopping cart using Vuex, Vue Router and Vue.

This store allows you to add and remove items from a cart, filter items by category, create a new user, log in and log out (with automatic redirect), and “purchase” the items in the cart on the checkout page.

To get started, make sure you have a package manager like Node.js installed. Node.js is used to install packages.

You’ll also want to have vue-cli installed. Visit the official documentation for more information on how this is done.

Next, navigate to the project directory in the terminal, then run the following commands (Node.js):

Project Setup


npm install


Compiles and hot-reloads for development


npm run serve


This project implements a simple store with the following features:


1. Login / Create account (with automatic redirect)
2. Retrieve products from a mock 'API'
3. Add/Remove item to shopping cart
4. Simulate purchasing items on checkout
5. Custom 404 page
6. Display products per category
7. Hamburger 'options' menu


Home Page

Log In Page

Check Out Page

Hamburger Options Menu

Create Account Page

Log In Page

Home Page

Check Out Page

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.