# Vue 2 Shopping Cart Project 🚀

This guide walks through the steps to create a Vue 2 project manually, including setting up components for a shopping cart.

---

📌 Project Setup

Step 1: Create a Project Folder

Run the following commands in the terminal:

mkdir cart  # Create a project folder
cd cart     # Navigate into the folder

---

Step 2: Initialize npm

Run the following command to initialize the project:

npm init -y

This creates a package.json file with default values.

---

Step 3: Install Vue 2 and Vue CLI Service

Install Vue 2 and CLI service version 4:

npm install vue@2
npm install @vue/cli-service@4

---

Step 4: Initialize Git and Add .gitignore

Run:

git init

Create a .gitignore file and add:

node_modules/
dist/
.env

---

Step 5: Create the src Folder and Setup Files

Create src/main.js

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

Create src/App.vue

<template>
  <div id="app">
    <CartDemo />
  </div>
</template>

<script>
import CartDemo from './components/Cart/index';

export default {
  name: 'App',
  components: {
    CartDemo
  }
};
</script>

<style>
/* Add global styles here if needed */
</style>

---

🛒 Shopping Cart Feature

Step 6: Create the Components Folder Structure

Inside src/components, create the following folder structure:

src/components/
│── Cart/
│   │── index.vue
│   │── event.js
│   │── CartList/
│   │   └── index.vue
│   │── ProductionList/
│   │   ├── index.vue
│   │   └── ProductionItem.vue

---

Step 7: Implement Shopping Cart Components

src/components/Cart/index.vue

<template>
  <div>
    <ProductionList :list="productionList" />
    <hr />
    <CartList :productionList="productionList" :cartList="cartList" />
  </div>
</template>

<script>
import ProductionList from './ProductionList/index';
import CartList from './CartList/index';
import event from './event';

export default {
  components: {
    ProductionList,
    CartList
  },
  data() {
    return {
      productionList: [
        { id: 'a1', product: 'pd1', price: 1 },
        { id: 'a2', product: 'p2', price: 2 },
        { id: 'a3', product: 'p3', price: 3 },
        { id: 'a4', product: 'p4', price: 4 },
      ],
      cartList: []
    };
  },
  methods: {
    addToCart(id) {
      const prod = this.cartList.find(item => item.id === id);
      if (prod) {
        prod.quantity++;
        return;
      }
      this.cartList.push({ id, quantity: 1 });
    }
  },
  mounted() {
    event.$on('addToCart', this.addToCart);
  }
};
</script>

---

src/components/Cart/event.js

import Vue from 'vue';
export default new Vue();

---

src/components/Cart/ProductionList/index.vue

<template>
  <div>
    <ProductionItem v-for="item in list" :key="item.id" :item="item" />
  </div>
</template>

<script>
import ProductionItem from './ProductionItem';

export default {
  components: {
    ProductionItem
  },
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  }
};
</script>

---

src/components/Cart/ProductionList/ProductionItem.vue

<template>
  <div>
    Product: {{ item.product }} | Price: {{ item.price }}
    <button @click="clickHandler(item.id, $event)">Add to Cart</button>
  </div>
</template>

<script>
import event from '../event';

export default {
  props: {
    item: {
      type: Object,
      default() {
        return { id: 1, product: 'a' };
      }
    }
  },
  methods: {
    clickHandler(id, e) {
      e.preventDefault();
      event.$emit('addToCart', id);
    }
  }
};
</script>

---

src/components/Cart/CartList/index.vue

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      Product: {{ item.product }} | Price: {{ item.price }} | Quantity: {{ item.quantity }}
    </div>
    <h2>Total: {{ totalPrice }}</h2>
  </div>
</template>

<script>
export default {
  props: {
    productionList: {
      type: Array,
      default() {
        return [];
      }
    },
    cartList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  computed: {
    list() {
      return this.cartList.map(cartItem => {
        const product = this.productionList.find(prd => prd.id === cartItem.id);
        return { ...product, quantity: cartItem.quantity };
      });
    },
    totalPrice() {
      return this.list.reduce((acc, item) => acc + item.price * item.quantity, 0);
    }
  }
};
</script>

---

✅ Running the Project

To start the development server, update the scripts section in package.json:

"scripts": {
  "serve": "vue-cli-service serve"
}

Then run:

npm run serve

Your Vue 2 Shopping Cart project should now be running! 🎉

---

📌 Summary

• Created a Vue 2 project manually without Vue CLI scaffolding.
• Implemented a shopping cart with ProductionList, ProductionItem, and CartList components.
• Used Vue’s event system (event.js) to handle cart updates.