Vue || How To Create A Simple Store With Shopping Cart Using Vuex, Vue Router & Vue

Print Friendly, PDF & Email

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.


1. Get Started

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


2. Features

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


3. Screenshots

Home Page

Sample

Log In Page

Sample

Check Out Page

Sample

Hamburger Options Menu

Sample

Create Account Page

Sample

Log In Page

Sample

Home Page

Sample

Check Out Page

Sample


4. Download

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.

Leave a Reply