# Page-Specific Vue Bundles

## Overview
The Vue application has been split into page-specific bundles to optimize performance. Each page now only loads the Vue components it actually uses.

## Structure

### Common Bundle (shared across all pages)
`assets/js/vue/common.js` - Contains:
- Vue setup & Vuex store
- Common components (ProductItem, ProductPrice, Header components)
- Modals (Compare, AddToCart)

### Page-Specific Bundles
Located in `assets/js/vue/pages/`:

1. **home.js** - Home page
   - Home, CategoryList, CategoryMenuItem, Subscriber, TaxSwitcher

2. **catalog.js** - Category/Catalog pages
   - Catalog, TaxSwitcher

3. **product.js** - Product detail page
   - Product, ProductCreditPrices, ImageFullscreenSlider, TaxSwitcher, OrderReviewsForm

4. **checkout.js** - Checkout page
   - Checkout, GoogleReCaptchaV3

5. **cart.js** - Shopping cart page
   - Cart, TaxSwitcher

6. **profile.js** - User profile/account pages
   - Profile

7. **register.js** - Registration page
   - Register, GoogleReCaptchaV3

8. **other.js** - Contact, Search, Compare pages
   - CompareProducts, Contact, Search, GoogleReCaptchaV3, Subscriber

## How It Works

1. **Base JS** (`app.js`) loads on all pages - contains jQuery, axios, common scripts
2. **Page-specific Vue bundle** loads based on route - only loads components needed for that page
3. **Automatic loading** via `vue-loader.blade.php` - detects route and loads appropriate bundle

## Bundle Size Comparison

### Before (Single Bundle)
- All pages load: ~4MB (dev) / ~1.5MB (prod)

### After (Split Bundles)
- Home page: ~400KB (only home components)
- Product page: ~350KB (only product components)
- Catalog page: ~300KB (only catalog components)
- Checkout page: ~250KB (only checkout components)

**Estimated savings: 60-70% per page load**

## Adding New Components

### To add a component to a specific page:

1. Open the appropriate page file: `assets/js/vue/pages/[page].js`
2. Import the component
3. Register it with `app.component('component-name', ComponentName)`

### To add a component to all pages:

1. Open `assets/js/vue/common.js`
2. Import and register the component there

## Route Detection

Routes are detected in `views/layout/components/vue-loader.blade.php`:

```php
if (request()->routeIs('home')) → vue-home.js
if (request()->routeIs('catalog.*', 'category.*')) → vue-catalog.js
if (request()->routeIs('product.*')) → vue-product.js
// etc...
```

Update this file if you add new routes or want to change which bundle loads for a route.

## Building

```bash
# Development
npm run dev

# Production
npm run production
```

## Troubleshooting

**Component not rendering?**
- Check if component is registered in the correct page-specific file
- Verify the route detection in `vue-loader.blade.php`
- Check browser console for errors

**Bundle not loading?**
- Clear Laravel cache: `php artisan view:clear`
- Rebuild assets: `npm run dev`
- Check Network tab to see which bundles are loading