Vue Embeddable E-commerce Widget
🚀 Vue 3 + Vite-powered, 5-item infinite carousel widget that you can embed anywhere
---
# 📦 Project Overview
This project is an embeddable **Vue 3** widget built with **Vite** that provides:
- ✅ A **5-item** horizontal carousel per viewport
- ✅ **Prev/Next** buttons with smooth infinite looping
- ✅ Fully **responsive** (desktop → tablet → mobile)
- ✅ **Scoped CSS** injected at runtime (no separate CSS file)
- ✅ Bundled as a **single IIFE** (`widget.min.js`) for easy embedding
- ✅ **HMR** during development with `npm run dev`
- ✅ **CDN-ready** production bundle
---
# 🎯 Features
| Feature | Status |
|---------------------------------|:------:|
| Vue 3 Single-File Components | ✅ |
| Vite Dev Server + HMR | ✅ |
| 5 Items Per Viewport | ✅ |
| Infinite Looping Carousel | ✅ |
| CSS Injected by JS (no CSS file)| ✅ |
| Shadow DOM Isolation | ✅ |
| Zero Runtime Dependencies | ✅ |
---
# 🚀 Quick Start
### 1️⃣ Clone the repository
```bash
git clone https://github.com/your-username/vue-ecom-widget.git
cd vue-ecom-widget
```
### 2️⃣ Install dependencies
```bash
npm install
```
### 3️⃣ Start development server (HMR)
```bash
npm run dev
```
> Opens — edit `src/Widget.vue` and see live updates.
### 4️⃣ Build for production
```bash
npm run build
```
> Outputs a single `dist/widget.min.js` and copies `preview.html` into `dist/`.
### 5️⃣ Preview production build
```bash
npm run preview
```
> Opens showing the bundled widget.
---
# 🛠 Usage Example
Embed in **any** HTML page:
```html
```
✅ The Vue widget will mount itself into your page seamlessly.
---
# ✨ Widget Preview
---
# ⚙️ Configuration Options
| Property | Type | Default | Description |
| -------------- | -------- | ----------------- | ---------------------------------------- |
| `selector` | `string` | `#my-ecom-widget` | CSS selector where the widget mounts |
| `category` | `string` | `'electronics'` | Fake Store API category to fetch |
| `visibleCount` | `number` | `5` | Number of cards visible per viewport |
Example:
```js
window.EcomWidget.init({
selector: '.restaurant-menu',
category: 'jewelery',
visibleCount: 5
});
```
---
# 📡 API Endpoints Used
- **GET** products by category:
`https://fakestoreapi.com/products/category/{category}`
- **POST** add to cart:
`https://fakestoreapi.com/carts`
*(Free public test API — no API key required.)*
---
# 🧩 Technology Stack
- **Vue 3** with `