viewlogic 1.1.0 → 1.1.1

package/README.md

@@ -1,4 +1,4 @@
-# ViewLogic Router
+# ViewLogic Router v1.1.1
 
 <p align="center">
   <a href="https://github.com/hopegiver/viewlogic">
@@ -12,7 +12,15 @@
   </a>
 </p>
 
-> A revolutionary Vue 3 routing system with clear separation of View and Logic, enabling real-time development without build steps
+> A revolutionary Vue 3 routing system with automatic data fetching, form handling, and zero build development
+
+## 🆕 Latest Updates (v1.1.1)
+
+- ✨ **Automatic Form Handling** - Revolutionary form submission with `{paramName}` variable parameters
+- 🔄 **Multiple API Support** - Parallel data fetching from multiple APIs with named data storage
+- 🛡️ **Enhanced Validation** - HTML5 + custom function validation with graceful error handling
+- 🚀 **Component Loading Resilience** - Router continues to work even if components fail to load
+- 📝 **Comprehensive Documentation** - Extensive real-world examples and usage patterns
 
 ## 🎯 Core Philosophy: Simplicity Through Design
 
@@ -36,6 +44,7 @@ Clear separation between **View** (presentation) and **Logic** (business logic),
 - 🌐 **i18n Ready** - Built-in internationalization support
 - 🔐 **Authentication** - Built-in auth management system
 - 💾 **Smart Caching** - Intelligent route and component caching
+- 📝 **Automatic Form Handling** - Revolutionary form submission with variable parameters
 - 🚀 **Ultra-Lightweight** - Complete routing system in just 13KB gzipped (48KB minified)
 
 ## 📦 Installation
@@ -314,7 +323,8 @@ export default {
         const title = this.$t('product.title');
         
         // Data automatically fetched if dataURL is defined in component
-        // this.$fetchData() is called automatically in mounted()
+        // Single API: this.products available
+        // Multiple APIs: this.products, this.categories, this.stats, etc. available
         console.log('Auto-loaded data:', this.products); // From dataURL
     },
     methods: {
@@ -374,7 +384,10 @@ export default {
 - `$t(key, params)` - Translate text with optional parameters
 
 #### Data Management Functions  
-- `$fetchData()` - Fetch data from dataURL (if defined in component)
+- `$fetchData()` - Fetch data from single dataURL or all multiple dataURLs
+- `$fetchData('apiName')` - Fetch data from specific named API (multiple dataURL mode)
+- `$fetchAllData()` - Explicitly fetch all APIs (works for both single and multiple dataURL)
+- `$fetchMultipleData()` - Internal method for multiple API handling
 
 ### Component Data Properties
 
@@ -556,6 +569,7 @@ ViewLogic Router provides a complete routing solution in an incredibly small pac
 - ✅ Development/production modes
 - ✅ **Automatic data fetching with dataURL**
 - ✅ **Revolutionary DynamicInclude & HtmlInclude components**
+- ✅ **Automatic form handling with variable parameters**
 - ✅ **10+ Built-in UI components (Button, Modal, Card, etc.)**
 
 ### Why So Small?
@@ -570,46 +584,7 @@ ViewLogic Router provides a complete routing solution in an incredibly small pac
 - **Mobile Optimized** - Perfect for mobile-first applications
 - **CDN Friendly** - Small size ideal for CDN distribution
 
-## ⚡ Performance Comparison: Development vs Production
-
-### Development Mode Performance
-```
-Route Loading Process:
-├── 1️⃣ Load logic file (products/list.js)
-├── 2️⃣ Load view file (products/list.html)
-├── 3️⃣ Load style file (products/list.css)
-└── 4️⃣ Load layout file (default.html)
-
-Total: 4 HTTP requests per route
-Best for: Development and debugging
-```
-
-### Production Mode Performance
-```
-Route Loading Process:
-└── 1️⃣ Load single bundle (products/list.js)
-    ├── ✅ View template (pre-bundled)
-    ├── ✅ Business logic (minified)
-    └── ✅ Styles (inline CSS)
-
-Total: 1 HTTP request per route
-Best for: Production deployment
-```
-
-### Performance Impact
-| Mode | Requests per Route | Bundle Size | Load Time | Use Case |
-|------|-------------------|-------------|-----------|----------|
-| **Development** | 4 files | Unminified | Slower | Real-time development |
-| **Production** | 1 file | Minified | **75% Faster** | Live deployment |
-
-### Why Production is Faster
-- **Single Request**: No multiple file fetching overhead
-- **Pre-bundled Assets**: View, logic, and styles combined at build time
-- **Minified Code**: Smaller file sizes for faster network transfer
-- **Optimized Parsing**: Browser parses one optimized bundle instead of multiple files
-- **Better Caching**: Single file per route enables more efficient browser/CDN caching
-
-## 🏆 Performance vs Other Router Systems
+## 🏆 Performance Comparison
 
 ### Bundle Size Comparison
 | Router System | Bundle Size (Gzipped) | Features Included |
@@ -711,6 +686,10 @@ ViewLogic Router includes groundbreaking components that revolutionize how you h
 - **Script Execution** - Optional JavaScript execution in HTML content
 
 ### Automatic Data Fetching with dataURL
+
+ViewLogic Router includes revolutionary automatic data fetching that eliminates manual API calls in component lifecycle hooks.
+
+#### Single API (Simple Usage)
 ```javascript
 // src/logic/products/list.js
 export default {
@@ -736,13 +715,59 @@ export default {
 };
 ```
 
+#### Multiple APIs (Advanced Usage) - 🆕 Revolutionary!
+```javascript
+// src/logic/dashboard/main.js
+export default {
+    name: 'DashboardMain',
+    dataURL: {
+        products: '/api/products',
+        categories: '/api/categories', 
+        stats: '/api/dashboard/stats',
+        user: '/api/user/profile'
+    },  // ✨ Multiple APIs with named data!
+    data() {
+        return {
+            title: 'Dashboard'
+            // products: [], categories: [], stats: {}, user: {}
+            // All auto-populated from respective APIs!
+        };
+    },
+    mounted() {
+        // All APIs called in parallel, data available by name!
+        console.log('Products:', this.products);
+        console.log('Categories:', this.categories);
+        console.log('Stats:', this.stats);
+        console.log('User:', this.user);
+        console.log('Loading state:', this.$dataLoading);
+    },
+    methods: {
+        async refreshProducts() {
+            // Refresh specific API only
+            await this.$fetchData('products');
+        },
+        async refreshStats() {
+            // Refresh specific API only
+            await this.$fetchData('stats');
+        },
+        async refreshAllData() {
+            // Refresh all APIs
+            await this.$fetchAllData();
+        }
+    }
+};
+```
+
 **Features:**
 - **Zero-Config API Calls** - Just define `dataURL` and data is automatically fetched
-- **Query Parameter Integration** - Current route parameters are automatically sent to API
+- **🆕 Multiple API Support** - Define multiple APIs with custom names
+- **🚀 Parallel Processing** - Multiple APIs called simultaneously for best performance
+- **🎯 Selective Refresh** - Refresh specific APIs independently
+- **Query Parameter Integration** - Current route parameters are automatically sent to all APIs
 - **Loading State Management** - `$dataLoading` property automatically managed
-- **Error Handling** - Built-in error handling with events
-- **Data Merging** - API response automatically merged into component data
-- **Event Support** - `@data-loaded` and `@data-error` events available
+- **Advanced Error Handling** - Per-API error handling with detailed events
+- **Named Data Storage** - Each API result stored with its defined name
+- **Event Support** - `@data-loaded` and `@data-error` events with detailed info
 
 ### Why These Components Are Revolutionary
 
@@ -821,12 +846,21 @@ export default {
 ### Use Cases
 
 #### Automatic Data Fetching (dataURL)
+
+**Single API Usage:**
 - **🛒 Product Listings** - `dataURL: '/api/products'` automatically loads and populates product data
 - **👤 User Profiles** - `dataURL: '/api/user'` fetches user information with authentication
 - **📊 Dashboard Data** - `dataURL: '/api/dashboard/stats'` loads analytics data
 - **📰 Article Content** - `dataURL: '/api/articles'` populates blog posts or news
 - **🔍 Search Results** - Query parameters automatically sent to search API
 
+**🆕 Multiple API Usage (Revolutionary!):**
+- **📊 Dashboard Pages** - `dataURL: { stats: '/api/stats', users: '/api/users', orders: '/api/orders' }`
+- **🛒 E-commerce Pages** - `dataURL: { products: '/api/products', cart: '/api/cart', wishlist: '/api/wishlist' }`
+- **👥 Social Media** - `dataURL: { posts: '/api/posts', friends: '/api/friends', notifications: '/api/notifications' }`
+- **📱 Admin Panels** - `dataURL: { analytics: '/api/analytics', logs: '/api/logs', settings: '/api/settings' }`
+- **🎯 Landing Pages** - `dataURL: { hero: '/api/hero-content', testimonials: '/api/testimonials', features: '/api/features' }`
+
 #### Dynamic Components
 - **📰 Dynamic Content Management** - Load blog posts, news articles dynamically
 - **🛒 Product Details** - Fetch product information on-demand
@@ -849,284 +883,337 @@ export default {
 
 These components eliminate the need for complex state management and manual DOM manipulation, making dynamic content loading as simple as using a regular component.
 
-## 🔗 Revolutionary Query-Only Parameter System
+## 📝 Automatic Form Handling with Variable Parameters
+
+ViewLogic Router includes revolutionary automatic form handling that eliminates the need for manual form submission logic. Just define your forms with `action` attributes and the router handles the rest!
+
+### Basic Form Handling
 
-ViewLogic Router takes a radically different approach to URL parameters - **everything is query-based**. This design decision brings unprecedented simplicity and flexibility.
+```html
+<!-- src/views/contact.html -->
+<div class="contact-page">
+    <h1>Contact Us</h1>
+    <form action="/api/contact" method="POST">
+        <input type="text" name="name" required placeholder="Your Name">
+        <input type="email" name="email" required placeholder="Your Email">
+        <textarea name="message" required placeholder="Your Message"></textarea>
+        <button type="submit">Send Message</button>
+    </form>
+</div>
+```
 
-### Traditional Routing Problems
 ```javascript
-// Traditional Vue Router - Complex path parameters
-const routes = [
-    { path: '/users/:id', component: UserDetail },
-    { path: '/users/:id/posts/:postId', component: PostDetail },
-    { path: '/categories/:category/products/:productId', component: ProductDetail }
-]
-
-// Accessing parameters is inconsistent and complex
+// src/logic/contact.js
 export default {
+    name: 'ContactPage',
     mounted() {
-        const userId = this.$route.params.id;        // Path parameter
-        const page = this.$route.query.page;         // Query parameter
-        const search = this.$route.query.search;     // Query parameter
-        
-        // Complex parameter access logic needed
-        if (userId && page) {
-            // Load data...
-        }
+        // Forms are automatically bound - no additional code needed!
+        // Form submission will automatically POST to /api/contact
+        console.log('Form handling is automatic!');
     }
-}
+};
+```
+
+### Variable Parameter Forms - 🆕 Revolutionary!
+
+The most powerful feature is **variable parameter support** in action URLs. You can use simple template syntax to inject dynamic values:
+
+```html
+<!-- Dynamic form actions with variable parameters -->
+<form action="/api/users/{userId}/posts" method="POST" 
+      data-success="handlePostSuccess"
+      data-error="handlePostError">
+    <input type="text" name="title" required placeholder="Post Title">
+    <textarea name="content" required placeholder="Post Content"></textarea>
+    <button type="submit">Create Post</button>
+</form>
+
+<!-- Order update with dynamic order ID -->
+<form action="/api/orders/{orderId}/update" method="PUT"
+      data-success="orderUpdated"
+      data-redirect="/orders">
+    <input type="number" name="quantity" required>
+    <select name="status">
+        <option value="pending">Pending</option>
+        <option value="processing">Processing</option>
+        <option value="completed">Completed</option>
+    </select>
+    <button type="submit">Update Order</button>
+</form>
+
+<!-- File upload support -->
+<form action="/api/profile/{userId}/avatar" method="POST" enctype="multipart/form-data"
+      data-success="avatarUploaded">
+    <input type="file" name="avatar" accept="image/*" required>
+    <button type="submit">Upload Avatar</button>
+</form>
 ```
 
-### ViewLogic Router Solution - Pure Simplicity
 ```javascript
-// ViewLogic Router - Everything is query-based, no route definitions needed
-// Just navigate with parameters
-router.navigateTo('users', { id: 123 });          // /users?id=123
-router.navigateTo('posts', { 
-    userId: 123, 
-    postId: 456 
-});                                               // /posts?userId=123&postId=456
-
-// In your route component - unified parameter access
+// Component logic - parameters are resolved automatically
 export default {
-    mounted() {
-        const userId = this.getParam('id');          // Always the same method
-        const postId = this.getParam('postId', 1);   // With default value
-        const allParams = this.getParams();          // Get everything
-        
-        // Simple and consistent - no complex logic needed
-        if (userId) {
-            this.loadUserData(userId);
-        }
+    name: 'UserProfile',
+    data() {
+        return {
+            userId: 123,    // {userId} will be replaced with this value
+            orderId: 456    // {orderId} will be replaced with this value
+        };
     },
     methods: {
-        loadUserData(id) {
-            // Use global functions directly
-            this.navigateTo('user-profile', { id });
+        handlePostSuccess(response) {
+            console.log('Post created successfully!', response);
+        },
+        orderUpdated(response) {
+            console.log('Order updated!', response);
         }
     }
-}
+};
 ```
 
-### Advantages of Query-Only Parameters
+### How Parameter Resolution Works
 
-#### 1. **Simplified Route Definition**
-```javascript
-// Traditional: Complex nested routes
-const routes = [
-    {
-        path: '/products/:category',
-        component: ProductList,
-        children: [
-            { path: ':id', component: ProductDetail },
-            { path: ':id/reviews/:reviewId', component: ReviewDetail }
-        ]
-    }
-];
+Parameters are resolved automatically from multiple sources in this order:
 
-// ViewLogic: Simple flat routes
-const routes = ['products', 'product-detail', 'review-detail'];
-```
+1. **Route Parameters**: `this.getParam('paramName')` - from URL query parameters
+2. **Component Data**: `this.paramName` - from component's data properties  
+3. **Computed Properties**: `this.paramName` - from component's computed properties
 
-#### 2. **Consistent Parameter Access**
 ```javascript
-// Traditional: Multiple ways to access parameters
-export default {
-    mounted() {
-        const pathParam = this.$route.params.id;     // Path parameters
-        const queryParam = this.$route.query.page;   // Query parameters
-        // Need complex logic to handle both types
-    }
-}
-
-// ViewLogic: One unified way with global functions
+// Component example
 export default {
+    name: 'UserProfile',
+    data() {
+        return {
+            userId: 123,        // Available as {userId} in action URLs
+            productId: 456      // Available as {productId} in action URLs
+        };
+    },
+    computed: {
+        currentOrderId() {   // Available as {currentOrderId} in action URLs
+            return this.getParam('orderId') || this.defaultOrderId;
+        }
+    },
     mounted() {
-        const id = this.getParam('id');              // Always the same
-        const page = this.getParam('page', 1);       // Always with defaults
-        // Clean and simple - no $route needed!
+        // Route parameters also work: /user-profile?userId=789
+        // {userId} will use 789 from URL, or fall back to data() value of 123
     }
-}
+};
 ```
 
-#### 3. **Better SEO and URL Sharing**
-```javascript
-// Traditional: Hard to understand URLs
-/products/electronics/123/reviews/456
+### Event Handlers and Callbacks
+
+Define success and error handlers using data attributes:
 
-// ViewLogic: Clear, readable URLs
-/product-detail?category=electronics&id=123
-/review-detail?productId=123&reviewId=456
+```html
+<form action="/api/newsletter/subscribe" method="POST"
+      data-success="subscriptionSuccess"
+      data-error="subscriptionError"
+      data-redirect="/thank-you">
+    <input type="email" name="email" required>
+    <button type="submit">Subscribe</button>
+</form>
 ```
 
-#### 4. **Enhanced Developer Experience**
 ```javascript
-// Easy parameter manipulation in route components
+// src/logic/newsletter.js
 export default {
-    mounted() {
-        // Easy parameter reading with defaults - no router instance needed!
-        const category = this.getParam('category', 'all');
-        const sortBy = this.getParam('sort', 'name');
-        const currentPage = this.getParam('page', 1);
-    },
+    name: 'NewsletterPage',
     methods: {
-        applyFilters() {
-            // Easy navigation with parameters
-            this.navigateTo('products', { 
-                category: 'electronics',
-                sort: 'price',
-                page: 2
-            });
+        subscriptionSuccess(response, formData) {
+            console.log('Subscription successful!', response);
+            this.$toast('Thank you for subscribing!', 'success');
+            // Form will automatically redirect to /thank-you
+        },
+        subscriptionError(error, formData) {
+            console.error('Subscription failed:', error);
+            this.$toast('Subscription failed. Please try again.', 'error');
         }
     }
-}
+};
+```
+
+### Complete Form Options
+
+```html
+<!-- All available data attributes -->
+<form action="/api/complex/{{getParam('id')}}" method="POST"
+      data-success="handleSuccess"           <!-- Success callback method -->
+      data-error="handleError"               <!-- Error callback method -->
+      data-redirect="/success"               <!-- Auto-redirect on success -->
+      data-confirm="Are you sure?"           <!-- Confirmation dialog -->
+      data-loading="Processing..."           <!-- Loading message -->
+      enctype="multipart/form-data">         <!-- File upload support -->
+    
+    <input type="text" name="title" required>
+    <input type="file" name="attachment" accept=".pdf,.doc">
+    <button type="submit">Submit</button>
+</form>
+```
+
+### Authentication Integration
+
+Forms automatically include authentication tokens when available:
+
+```html
+<!-- Authentication token automatically added for authenticated users -->
+<form action="/api/protected/resource" method="POST">
+    <input type="text" name="data" required>
+    <button type="submit">Save Protected Data</button>
+</form>
 ```
 
-### Real-World Comparison
-
-| Feature | Traditional Path Params | ViewLogic Query-Only |
-|---------|------------------------|---------------------|
-| **Route Definition** | Complex nested structure | Simple flat routes |
-| **Parameter Access** | Mixed (`params` + `query`) | Unified (`getParam`) |
-| **URL Readability** | `/users/123/posts/456` | `/post?userId=123&id=456` |
-| **Default Values** | Manual checks needed | Built-in support |
-| **Parameter Validation** | Custom validation | Built-in sanitization |
-| **SEO Friendliness** | Poor (cryptic paths) | Excellent (descriptive) |
-| **URL Bookmarking** | Limited flexibility | Full flexibility |
-| **Testing** | Complex mock objects | Simple query strings |
-
-### Why Query-Only is Superior
-
-1. **🎯 Simplicity**: No complex route definitions or nested structures
-2. **🔍 Transparency**: URLs are self-explanatory and human-readable
-3. **🛠️ Consistency**: One way to handle all parameters
-4. **⚡ Performance**: Faster route matching without regex patterns
-5. **🔐 Security**: Built-in parameter validation and sanitization
-6. **📱 Mobile Friendly**: URLs work perfectly with mobile deep linking
-7. **🎨 Flexibility**: Easy to add/remove parameters without changing route structure
-
-### Migration Benefits
 ```javascript
-// Before: Complex route configuration
-const routes = [
-    { path: '/blog/:year/:month/:slug', name: 'blog-post' }
-];
+// Authentication token automatically included in headers:
+// Authorization: Bearer <user-token>
+// No additional code needed!
+```
+
+### Form Validation
+
+Built-in client-side validation with custom validation support:
+
+```html
+<!-- HTML5 validation attributes work automatically -->
+<form action="/api/user/register" method="POST" data-success="registrationSuccess">
+    <input type="email" name="email" required 
+           pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
+    <input type="password" name="password" required minlength="8">
+    <input type="password" name="confirmPassword" required>
+    <button type="submit">Register</button>
+</form>
+```
+
+### Real-World Examples
+
+#### User Profile Update
+```html
+<!-- User profile with dynamic user ID -->
+<form action="/api/users/{userId}" method="PUT" 
+      data-success="profileUpdated"
+      data-redirect="/profile?updated=true">
+    <input type="text" name="firstName" :value="user.firstName">
+    <input type="text" name="lastName" :value="user.lastName">
+    <input type="email" name="email" :value="user.email">
+    <button type="submit">Update Profile</button>
+</form>
+```
+
+#### E-commerce Order Management
+```html
+<!-- Order status update with order ID from route -->
+<form action="/api/orders/{orderId}/status" method="PUT"
+      data-success="orderStatusUpdated">
+    <select name="status" required>
+        <option value="pending">Pending</option>
+        <option value="shipped">Shipped</option>
+        <option value="delivered">Delivered</option>
+    </select>
+    <textarea name="notes" placeholder="Optional notes"></textarea>
+    <button type="submit">Update Status</button>
+</form>
+```
+
+#### Blog Post Creation
+```html
+<!-- Create post for specific category -->
+<form action="/api/categories/{categoryId}/posts" method="POST"
+      data-success="postCreated"
+      data-redirect="/posts">
+    <input type="text" name="title" required>
+    <textarea name="content" required></textarea>
+    <input type="file" name="featured_image" accept="image/*">
+    <button type="submit">Create Post</button>
+</form>
+```
 
-// Traditional component access
+### Advantages Over Traditional Form Handling
+
+| Feature | Traditional Vue/React | ViewLogic Router |
+|---------|----------------------|------------------|
+| **Setup Required** | Manual event handlers + API calls | ✅ Zero setup - just add `action` |
+| **Variable Parameters** | Manual string interpolation | ✅ Template syntax with function evaluation |
+| **Authentication** | Manual token handling | ✅ Automatic token injection |
+| **File Uploads** | Complex FormData handling | ✅ Automatic multipart support |
+| **Loading States** | Manual loading management | ✅ Automatic loading indicators |
+| **Error Handling** | Custom error logic | ✅ Built-in error callbacks |
+| **Validation** | External validation libraries | ✅ HTML5 + custom validation |
+| **Redirect Logic** | Manual navigation code | ✅ `data-redirect` attribute |
+
+### Code Comparison: Traditional vs ViewLogic
+
+**Traditional Approach** (30+ lines):
+```javascript
+// Lots of boilerplate for simple form
 export default {
-    mounted() {
-        const year = this.$route.params.year;
-        const month = this.$route.params.month;
-        const slug = this.$route.params.slug;
-        // Complex logic needed...
+    data() { return { form: {}, loading: false, error: null }; },
+    methods: {
+        async submitForm() {
+            // 20+ lines of fetch, error handling, tokens, etc.
+        }
     }
-}
+};
+```
 
-// After: Simple and flexible - no route definitions needed!
+**ViewLogic Approach** (5 lines):
+```html
+<form action="/api/contact" data-success="handleSuccess">
+    <input name="name" required>
+    <button type="submit">Send</button>
+</form>
+```
+```javascript
 export default {
-    mounted() {
-        // Clean global function access
-        const year = this.getParam('year', new Date().getFullYear());
-        const month = this.getParam('month', new Date().getMonth() + 1);
-        const slug = this.getParam('slug');
-        const utm_source = this.getParam('utm_source'); // Easy to add tracking params
-    },
     methods: {
-        navigateToPost() {
-            this.navigateTo('blog-post', { 
-                year: 2024, 
-                month: 12, 
-                slug: 'my-article',
-                utm_source: 'newsletter'
-            });
-        }
+        handleSuccess(response) { /* success handling */ }
     }
-}
+};
 ```
 
-This approach makes ViewLogic Router the most developer-friendly routing system available, eliminating the complexity that has plagued traditional routers for years.
+**Result**: 80% less code with more features (auto-auth, validation, error handling).
 
-## 🛡️ Error Handling
+## 🔗 Query-Only Parameter System
 
-The router includes comprehensive error handling:
+ViewLogic Router uses **only query parameters** - no complex path parameters like `/users/:id`. Everything is simple query-based: `/users?id=123`.
 
-```javascript
-// Global error handler
-router.errorHandler.log('error', 'Custom error message');
+### Key Benefits
+1. **Simple URLs**: `/product?id=123&category=electronics` (clear and readable)
+2. **Consistent Access**: Always use `this.getParam('id')` - never mix path/query
+3. **No Route Config**: No complex route definitions needed
+4. **SEO Friendly**: Descriptive parameter names in URLs
 
-// Route error handling
-router.errorHandler.handleRouteError('routeName', error);
+### Usage Example
+```javascript
+// Navigate
+this.navigateTo('products', { id: 123, category: 'electronics' });
+// → /products?id=123&category=electronics
 
-// 404 handling is automatic
+// Access in component
+export default {
+    mounted() {
+        const id = this.getParam('id');           // Get parameter
+        const category = this.getParam('category', 'all'); // With default
+        const allParams = this.getParams();      // Get all parameters
+    }
+};
 ```
 
-## 🚀 Production Deployment
 
-### 1. Build your routes for production:
-```bash
-npm run build
-# This will:
-# - Combine view + logic + style files from src/
-# - Generate optimized route bundles in routes/ folder
-# - Minify and optimize each route
-# - Copy routes/ to root level for deployment
-```
+## 🛡️ Error Handling
 
-### 2. Deploy with production configuration:
-```html
-<!DOCTYPE html>
-<html>
-<head>
-    <title>My ViewLogic App</title>
-    <link rel="stylesheet" href="/css/base.css">
-</head>
-<body>
-    <div id="app"></div>
-    
-    <!-- Vue 3 Production -->
-    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
-    
-    <!-- ViewLogic Router from CDN -->
-    <script src="https://cdn.jsdelivr.net/npm/viewlogic/dist/viewlogic-router.umd.js"></script>
-    
-    <script>
-        ViewLogicRouter({ 
-            environment: 'production',
-            basePath: '/',          // Root path
-            routesPath: '/routes',  // Routes folder at root level
-            i18nPath: '/i18n',     // i18n folder at root level
-            cacheMode: 'session',   // Enable session caching
-            useComponents: true,
-            useI18n: true
-        });
-    </script>
-</body>
-</html>
-```
+Built-in comprehensive error handling with automatic 404 detection, graceful component loading failures, and parameter validation with fallbacks.
 
-### 3. Production deployment structure:
-```
-production/
-├── index.html
-├── i18n/                   # Language files
-│   ├── ko.json
-│   └── en.json
-├── css/
-│   └── base.css           # Global styles
-├── js/                    # Optional (can use CDN instead)
-│   ├── viewlogic-router.umd.js
-│   └── viewlogic-router.min.js
-├── routes/                # Built route bundles
-│   ├── home.js           # Bundled: view + logic + style
-│   ├── about.js
-│   └── products/
-│       ├── list.js
-│       └── detail.js
-└── assets/
-    ├── images/
-    └── fonts/
+## 🚀 Production Deployment
 
-# Note: src/ folder is NOT deployed to production
+1. **Build**: `npm run build` - Combines view + logic + style into optimized route bundles
+2. **Deploy**: Set `environment: 'production'` and use CDN or local files
+3. **Structure**: Deploy `routes/`, `css/`, `i18n/` folders (exclude `src/`)
+
+**CDN Usage:**
+```html
+<script src="https://cdn.jsdelivr.net/npm/viewlogic/dist/viewlogic-router.umd.js"></script>
+<script>
+    ViewLogicRouter({ environment: 'production' }).mount('#app');
+</script>
 ```
 
 ## 🤝 Contributing