viewlogic 1.2.2 → 1.2.4

package/README.md

@@ -12,1080 +12,755 @@
   </a>
 </p>
 
-> A revolutionary Vue 3 routing system with View-Logic separation and Zero Build Development
+> **Complete Vue 3 Framework**: All-in-one solution for modern web development
 
-## 🎯 Core Philosophy: Simplicity Through Design
+## 🎯 Core Philosophy
 
-ViewLogic Router revolutionizes Vue development with two fundamental core principles:
+ViewLogic Router revolutionizes Vue development with two fundamental principles:
 
 ### 🎭 View-Logic Separation
-**Complete separation between View (presentation) and Logic (business logic)**. Views are pure HTML templates, logic is pure JavaScript components, making your code more maintainable, testable, and scalable.
+**Complete separation between View (presentation) and Logic (business logic)**. Views are pure HTML templates, logic is pure JavaScript components. This separation makes your code more maintainable, testable, and scalable.
 
 ### 🚀 Zero Build Development
 **Zero build step required in development mode**. Work directly with source files, see changes instantly without any compilation, bundling, or build processes. True real-time development experience.
 
-## ✨ Key Features
+## ✨ What Makes ViewLogic Special
 
-- 🚀 **Ultra-Lightweight** - Complete routing system in just 13KB gzipped (48KB minified)
-- 🔄 **Multiple API Support** - Parallel data fetching from multiple APIs with named data storage  
-- 📝 **Automatic Form Handling** - Revolutionary form submission with `{paramName}` variable parameters
-- 🛠️ **Built-in Components** - Preloaded UI components including revolutionary DynamicInclude & HtmlInclude
-- 🔗 **Query-Based Parameter System** - Simple query-only parameters (`/users?id=123`) instead of complex path parameters
-- ⚡ **Optimized Production** - Pre-built individual route bundles for lightning-fast production
-- 📁 **Intuitive Structure** - Organized folder structure for views, logic, styles, layouts, and components
-- 💾 **Smart Caching** - Intelligent route and component caching
-- 🔐 **Authentication** - Built-in auth management system
-- 🌐 **i18n Ready** - Built-in internationalization support
+**All-in-One Solution** - Replace multiple libraries with one unified framework:
+- 🔀 **Routing** - File-based routing with zero configuration
+- 📦 **State Management** - Built-in reactive state without external dependencies
+- 🔐 **Authentication** - JWT auth with multiple storage options
+- 🌐 **Internationalization** - Multi-language support with lazy loading
+- 💾 **Caching** - Smart caching with TTL and LRU eviction
+- 🌐 **API Client** - HTTP client with automatic token injection
+- 📝 **Form Handling** - Revolutionary form processing with parameter substitution
 
-## 📦 Installation
+**Tiny Bundle Size** - Complete framework in just **51KB minified / 17KB gzipped**!
 
-Create a new ViewLogic project with our complete template:
+**Easy Integration** - Drop-in UMD build available for instant usage without build tools.
 
-```bash
-npm create viewlogic my-app
-cd my-app
-# Ready to go! No additional setup needed
+## 🏗️ Project Structure
+
+ViewLogic Router follows a clean, intuitive folder structure:
+
+```
+project/
+├── src/
+│   ├── views/              # HTML templates (pure presentation)
+│   │   ├── home.html
+│   │   ├── user-profile.html
+│   │   └── dashboard.html
+│   ├── logic/              # Vue component logic (pure JavaScript)
+│   │   ├── home.js
+│   │   ├── user-profile.js
+│   │   └── dashboard.js
+│   ├── components/         # Reusable UI components
+│   │   ├── UserCard.vue
+│   │   └── NavigationMenu.vue
+│   ├── layouts/            # Layout templates
+│   │   ├── default.html
+│   │   └── admin.html
+│   └── styles/             # Page-specific CSS files
+│       ├── home.css
+│       └── user-profile.css
+├── css/                    # Global CSS files
+│   └── base.css            # Base styles
+├── js/                     # JavaScript library files
+│   ├── viewlogic-router.js     # Development version
+│   ├── viewlogic-router.min.js # Minified version
+│   └── viewlogic-router.umd.js # UMD bundle
+├── i18n/                   # Internationalization files
+│   ├── en.json            # English translations
+│   ├── ko.json            # Korean translations
+│   └── ja.json            # Japanese translations
+├── routes/                 # Auto-generated after building
+│   ├── home.js            # Built route bundles
+│   ├── user-profile.js
+│   └── dashboard.js
+├── index.html              # Main entry point
+└── package.json
 ```
 
-Or manually install the router only:
+## 🚀 Quick Start
+
+### Method 1: Create New Project (Recommended)
+
 ```bash
-npm install viewlogic
+npm create viewlogic myapp
+cd myapp
+npm run dev
 ```
 
-## 🚀 Quick Start
+This creates a complete project with examples and starts the development server.
 
-### Development Mode (No Build Required!)
+### Method 2: UMD Build (No Build Tools)
 
 ```html
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset="UTF-8">
-    <title>My ViewLogic App - Development</title>
-    <link rel="stylesheet" href="/css/base.css">
+    <title>My ViewLogic App</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/viewlogic/dist/viewlogic-router.umd.js"></script>
 </head>
 <body>
     <div id="app"></div>
-    
-    <!-- Vue 3 (development version) -->
-    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/viewlogic/dist/viewlogic-router.umd.js"></script>
-    
     <script>
-        // Development mode - loads files directly from src/
         ViewLogicRouter({
-            environment: 'development',
+            environment: 'development'
         });
     </script>
 </body>
 </html>
 ```
 
-### Production Mode (Optimized Bundles)
+### Method 3: ES6 Modules
+
+```bash
+npm install viewlogic
+```
 
 ```html
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset="UTF-8">
     <title>My ViewLogic App</title>
-    <link rel="stylesheet" href="/css/base.css">
 </head>
 <body>
     <div id="app"></div>
-    
-    <!-- Vue 3 (production version) -->
-    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/viewlogic/dist/viewlogic-router.umd.js"></script>
-    
-    <script>
-        // Production mode - loads pre-built bundles from routes/
-        ViewLogicRouter({
+    <script type="module">
+        import { ViewLogicRouter } from 'viewlogic';
+        const router = new ViewLogicRouter({
             environment: 'production',
-            useI18n: true,
-            logLevel: 'error'          // Only log errors
+            authEnabled: true,
+            useI18n: true
         });
     </script>
 </body>
 </html>
 ```
 
-### ES6 Module Usage
-
-```javascript
-import { ViewLogicRouter } from 'js/viewlogic-router.js';
+### Create Your First Route
 
-// Create router instance
-const router = new ViewLogicRouter({
-    environment: 'development'
-});
-
-// Router will automatically initialize and handle routing
+**src/views/home.html**
+```html
+<div class="home">
+    <h1>{{ message }}</h1>
+    <button @click="increment">Click me: {{ count }}</button>
+</div>
 ```
 
-### CommonJS/Node.js Usage
-
+**src/logic/home.js**
 ```javascript
-const { createRouter } = require('js/viewlogic-router.umd.js');
+export default {
+    // Optional: specify layout (defaults to 'default')
+    layout: 'default',        // Use layouts/default.html
+    // layout: 'admin',       // Use layouts/admin.html
+    // layout: null,          // No layout (page-only content)
 
-createRouter({
-    environment: 'development'
-}).then(router => {
-    console.log('Router ready');
-});
+    data() {
+        return {
+            message: 'Welcome to ViewLogic!',
+            count: 0
+        };
+    },
+    methods: {
+        increment() {
+            this.count++;
+        }
+    }
+};
 ```
 
-## 📁 Project Structure
+**src/styles/home.css** (optional)
+```css
+.home {
+    padding: 2rem;
+    text-align: center;
+}
 
-### Development Mode Structure
-```
-my-app/
-├── index.html
-├── i18n/                # Language files (top-level)
-│   ├── ko.json
-│   └── en.json
-├── css/                 # Global styles
-│   └── base.css        # Base styles for entire site
-├── js/                  # System files (optional, can use CDN)
-│   ├── viewlogic-router.js
-│   ├── viewlogic-router.min.js
-│   └── viewlogic-router.umd.js
-├── src/                 # Source files (not deployed)
-│   ├── views/          # View templates (HTML)
-│   │   ├── home.html
-│   │   ├── about.html
-│   │   └── products/
-│   │       ├── list.html
-│   │       └── detail.html
-│   ├── logic/          # Business logic (JavaScript)
-│   │   ├── home.js
-│   │   ├── about.js
-│   │   └── products/
-│   │       ├── list.js
-│   │       └── detail.js
-│   ├── styles/         # Page-specific CSS
-│   │   ├── home.css
-│   │   ├── about.css
-│   │   └── products/
-│   │       ├── list.css
-│   │       └── detail.css
-│   ├── layouts/        # Layout templates
-│   │   ├── default.html
-│   │   └── admin.html
-│   └── components/     # Reusable components
-│       ├── Button.js
-│       ├── Modal.js
-│       └── Card.js
-└── package.json
+.home h1 {
+    color: #2c3e50;
+    margin-bottom: 1rem;
+}
 ```
 
-### Production Deployment Structure
-```
-my-app/
-├── index.html
-├── i18n/               # Language files
-│   ├── ko.json
-│   └── en.json
-├── css/                # Global styles
-│   └── base.css
-├── js/                 # Router system (or use CDN)
-│   ├── viewlogic-router.umd.js
-│   └── viewlogic-router.min.js
-├── routes/             # Built & optimized route bundles
-│   ├── home.js        # Combined view + logic + style
-│   ├── about.js    
-│   └── products/
-│       ├── list.js
-│       └── detail.js
-└── assets/            # Static assets
-    ├── images/
-    └── fonts/
-
-Note: src/ folder is excluded from production deployment
+**src/layouts/default.html** (optional)
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <title>My ViewLogic App</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+    <header class="navbar">
+        <h1>My App</h1>
+        <nav>
+            <a href="#/home">Home</a>
+            <a href="#/about">About</a>
+        </nav>
+    </header>
+
+    <main class="main-content">
+        <div class="container">
+            {{ content }}
+        </div>
+    </main>
+
+    <footer>
+        <p>&copy; 2024 My ViewLogic App</p>
+    </footer>
+</body>
+</html>
 ```
 
-## 🔧 Configuration Options
+### Query Parameter Example
 
-```javascript
-const config = {
-    // Basic Configuration
-    basePath: '/src',           // Base path for all resources
-    mode: 'hash',              // 'hash' or 'history'
-    environment: 'development', // 'development' or 'production'
-    
-    // Routing
-    routesPath: '/routes',      // Routes directory path
-    defaultLayout: 'default',   // Default layout name
-    useLayout: true,           // Enable layouts
-    
-    // Caching
-    cacheMode: 'memory',       // 'memory' or 'session' or 'none'
-    cacheTTL: 300000,         // Cache TTL in milliseconds
-    maxCacheSize: 50,         // Maximum cache entries
-    
-    // Components
-    useComponents: true,       // Enable built-in components
-    componentNames: [          // Components to preload
-        'Button', 'Modal', 'Card', 'Toast', 
-        'Input', 'Tabs', 'Checkbox', 'Alert'
-    ],
-    
-    // Internationalization
-    useI18n: true,            // Enable i18n
-    defaultLanguage: 'ko',    // Default language
-    
-    // Authentication
-    authEnabled: false,       // Enable authentication
-    loginRoute: 'login',      // Login route name
-    protectedRoutes: [],      // Protected route names
-    publicRoutes: ['login', 'register', 'home'],
-    authStorage: 'cookie',    // 'cookie' or 'localStorage'
-    
-    // Security
-    enableParameterValidation: true,
-    maxParameterLength: 1000,
-    maxParameterCount: 50,
-    
-    // Development
-    logLevel: 'info',         // 'debug', 'info', 'warn', 'error'
-    enableErrorReporting: true
-};
+**src/views/user-profile.html**
+```html
+<div class="user-profile">
+    <h1>User Profile</h1>
+    <p>User ID: {{ userId }}</p>
+    <p>Tab: {{ activeTab }}</p>
+    <button @click="switchTab('settings')">Settings</button>
+    <button @click="switchTab('posts')">Posts</button>
+</div>
 ```
 
-### 🏗️ Subfolder Deployment Support
-
-ViewLogic Router supports deployment in subfolders with smart path resolution:
-
+**src/logic/user-profile.js**
 ```javascript
-// Root deployment: https://example.com/
-ViewLogicRouter({
-    basePath: '/src',           // → https://example.com/src
-    routesPath: '/routes',      // → https://example.com/routes
-    i18nPath: '/i18n'          // → https://example.com/i18n
-});
-
-// Subfolder deployment: https://example.com/myapp/
-ViewLogicRouter({
-    basePath: 'src',            // → https://example.com/myapp/src (relative)
-    routesPath: 'routes',       // → https://example.com/myapp/routes (relative)
-    i18nPath: 'i18n',          // → https://example.com/myapp/i18n (relative)
-});
-
-// Mixed paths: https://example.com/projects/myapp/
-ViewLogicRouter({
-    basePath: './src',          // → https://example.com/projects/myapp/src
-    routesPath: '../shared/routes', // → https://example.com/projects/shared/routes  
-    i18nPath: '/global/i18n'    // → https://example.com/global/i18n (absolute)
-});
+export default {
+    computed: {
+        userId() {
+            return this.getParam('userId', 'No ID');
+        },
+        activeTab() {
+            return this.getParam('tab', 'profile');
+        }
+    },
+    methods: {
+        switchTab(tab) {
+            // Navigate with query parameters
+            this.navigateTo('user-profile', {
+                userId: this.userId,
+                tab: tab
+            });
+        }
+    }
+};
 ```
 
-**Path Resolution Rules:**
-- **Absolute paths** (`/path`) → `https://domain.com/path`
-- **Relative paths** (`path`, `./path`) → Resolved from current page location
-- **Parent paths** (`../path`) → Navigate up directory levels
-- **HTTP URLs** → Used as-is (no processing)
-
-### 🔄 Hash vs History Mode in Subfolders
-
-Both routing modes work seamlessly in subfolder deployments:
+**Usage:** Navigate to `/user-profile?userId=123&tab=settings` or `#/user-profile?userId=123&tab=settings` (hash mode)
 
+**Multiple ways to access parameters:**
 ```javascript
-// Hash Mode (recommended for subfolders)
-// URL: https://example.com/myapp/#/products?id=123
-ViewLogicRouter({ 
-    mode: 'hash'           // Works anywhere, no server config needed
-});
+// Direct parameter access
+const userId = this.$params.userId;        // Route parameter (direct access)
+const tab = this.$query.tab;               // Query parameter (direct access)
+const search = this.getParam('search');    // Either route or query param
+const allParams = this.getParams();        // Get all parameters
 
-// History Mode (requires server configuration)
-// URL: https://example.com/myapp/products?id=123  
-ViewLogicRouter({ 
-    mode: 'history'        // Cleaner URLs, needs server setup
-});
+// With default values
+const page = this.getParam('page', 1);     // Default to 1 if not found
+const sort = this.$query.sort || 'asc';    // Manual default for query params
 ```
 
-**History Mode Server Configuration:**
-```nginx
-# Nginx - redirect all subfolder requests to index.html
-location /myapp/ {
-    try_files $uri $uri/ /myapp/index.html;
-}
-```
-
-```apache
-# Apache .htaccess in /myapp/ folder
-RewriteEngine On
-RewriteBase /myapp/
-RewriteRule ^index\.html$ - [L]
-RewriteCond %{REQUEST_FILENAME} !-f
-RewriteCond %{REQUEST_FILENAME} !-d
-RewriteRule . /myapp/index.html [L]
-```
+### Reusable Components
 
-## 📖 Complete API Documentation
-
-For comprehensive API documentation including all methods, configuration options, and detailed examples, see:
-
-**📚 [Complete API Reference →](./docs/index.md)**
-
-### Quick API Overview
+ViewLogic automatically loads components from the `components/` folder:
 
+**src/components/UserCard.js**
 ```javascript
-// Basic router usage
-const router = new ViewLogicRouter({ environment: 'development' });
-router.navigateTo('products', { id: 123, category: 'electronics' });
-const current = router.getCurrentRoute();
-
-// In route components - global methods automatically available:
 export default {
-    dataURL: '/api/products', // Auto-fetch data
-    async mounted() {
-        const id = this.getParam('id');           // Get parameter
-        this.navigateTo('detail', { id });        // Navigate
-        console.log('Data loaded:', this.products); // From dataURL
-        
-        // New $api pattern for RESTful API calls
-        const user = await this.$api.get('/api/users/{userId}');
-        await this.$api.post('/api/analytics', { pageView: 'products' });
-        
-        if (this.$isAuthenticated()) { /* auth check */ }
-        const text = this.$t('welcome.message');   // i18n
+    name: 'UserCard',
+    template: `
+        <div class="user-card">
+            <img :src="user.avatar" :alt="user.name" class="avatar">
+            <div class="info">
+                <h3>{{ user.name }}</h3>
+                <p>{{ user.email }}</p>
+                <button @click="$emit('edit', user)" class="btn-edit">
+                    Edit User
+                </button>
+            </div>
+        </div>
+    `,
+    emits: ['edit'],
+    props: {
+        user: {
+            type: Object,
+            required: true
+        }
     }
 };
 ```
 
-### Key Global Methods (Auto-available in all route components)
-- **Navigation**: `navigateTo()`, `getCurrentRoute()`
-- **Parameters**: `getParams()`, `getParam(key, defaultValue)`
-- **Data Fetching**: `$fetchData()` (with dataURL), `$api.get()`, `$api.post()`, `$api.put()`, `$api.patch()`, `$api.delete()`
-- **Authentication**: `$isAuthenticated()`, `$getToken()`, `$logout()`
-- **Forms**: Auto-binding with `action` attribute, duplicate prevention, validation
-- **i18n**: `$t(key, params)` for translations
+**Using components in views:**
 
-### Auto-Injected Properties
-```javascript
-// Automatically available in every route component:
-// currentRoute, $query, $lang, $dataLoading
+**src/views/users.html**
+```html
+<div class="users-page">
+    <h1>Users</h1>
+    <UserCard
+        v-for="user in users"
+        :key="user.id"
+        :user="user"
+        @edit="editUser"
+    />
+</div>
 ```
 
-## 🎯 View-Logic Separation: Core Philosophy in Action
-
-ViewLogic Router's fundamental philosophy of **View-Logic Separation** creates clear boundaries between concerns:
-
-### Philosophy Benefits
-- **🎨 Pure Presentation**: Views contain only HTML - no mixed logic or scripts
-- **🧠 Pure Logic**: JavaScript components focus solely on business logic
-- **⚡ Zero Build Required**: Work directly with separate files in development
-- **🔄 Hot Reload**: Instant changes without compilation or bundling
-
-### File Structure (Core Philosophy)
-- **View**: `src/views/products.html` - Pure HTML template
-- **Logic**: `src/logic/products.js` - Pure Vue component logic  
-- **Style**: `src/styles/products.css` - Pure CSS styles
-
-### Example: Philosophy in Practice
+**src/logic/users.js**
 ```javascript
-// src/logic/products.js - Pure business logic
 export default {
-    name: 'ProductsList',
-    dataURL: '/api/products',  // Auto-fetch data
     data() {
-        return { title: 'Our Products' };
+        return {
+            users: []
+        };
     },
     methods: {
-        viewDetail(id) {
-            this.navigateTo('product-detail', { id });
+        editUser(user) {
+            this.navigateTo('user-edit', { userId: user.id });
         }
     }
 };
 ```
 
-### Production: Automatic Optimization
-All separate files automatically combine into optimized bundles in `routes/` folder - maintaining the development philosophy while optimizing for production.
+**Dynamic Component Loading:**
+- Just add `.js` files to `src/components/` folder
+- Components are automatically discovered and loaded
+- No import statements needed - ViewLogic handles everything
+- Components are available instantly in all views
 
-## 🔄 Zero Build Development vs Optimized Production
+## 🎯 Core APIs
 
-ViewLogic Router's **Zero Build Development** (core philosophy) vs optimized production:
+### State Management
 
-| Mode | Philosophy | Files | Requests | Experience |
-|------|------------|-------|----------|------------|
-| **Development** | **Zero Build Required** | Separate files | 4 per route | **Real-time, instant changes** |
-| **Production** | **Optimized Performance** | Single bundle | 1 per route | **Lightning-fast loading** |
+Built-in reactive state management system:
 
 ```javascript
-// Zero Build Development (Core Philosophy)
-ViewLogicRouter({ environment: 'development' }); // Work directly with source files
+// Set state (any component can access)
+this.$state.set('user', { name: 'John', age: 30 });
+this.$state.set('theme', 'dark');
 
-// Optimized Production  
-ViewLogicRouter({ environment: 'production' }); // Use pre-built bundles
-```
+// Get state with optional default
+const user = this.$state.get('user');
+const theme = this.$state.get('theme', 'light');
 
-### Zero Build Development Benefits
-- ⚡ **Instant Changes** - Edit HTML/JS/CSS and see changes immediately
-- 🚀 **Zero Setup** - No webpack, vite, or build tools required
-- 🎯 **True Hot Reload** - Files load directly from src/ folder
-- 🛠️ **Pure Development** - Focus on code, not build configuration
-
-## 🪶 Ultra-Lightweight Bundle
-
-ViewLogic Router provides a complete routing solution in an incredibly small package:
-
-### Size Comparison
-- **ViewLogic Router**: 13KB gzipped (48KB minified)
-- **Vue Router + Auth + i18n + Cache**: 50KB+ gzipped
-
-### What's Included in 13KB
-- ✅ Complete Vue 3 routing system
-- ✅ Authentication & authorization
-- ✅ Internationalization (i18n)
-- ✅ Smart caching system
-- ✅ Query parameter management
-- ✅ Component lazy loading
-- ✅ Layout system
-- ✅ Error handling
-- ✅ 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?
-- **Zero Dependencies** - No external libraries required (except Vue 3)
-- **Tree-Shakable** - Only includes what you use
-- **Optimized Code** - Hand-crafted for minimal bundle size
-- **Smart Bundling** - Efficient code organization and minification
-
-### Performance Benefits
-- **Faster Load Times** - 70% smaller than typical Vue router setups
-- **Better UX** - Instant page loads with minimal JavaScript overhead
-- **Mobile Optimized** - Perfect for mobile-first applications
-- **CDN Friendly** - Small size ideal for CDN distribution
-
-## 🏆 Performance Comparison
-
-### Bundle Size Comparison
-| Router System | Bundle Size (Gzipped) | Features Included |
-|---------------|----------------------|------------------|
-| **ViewLogic Router** | **13KB** | Routing + Auth + i18n + Cache + Query + Components |
-| Vue Router | 12KB | Routing only |
-| Vue Router + Pinia | 18KB | Routing + State |
-| React Router | 15KB | Routing only |
-| Next.js Router | 25KB+ | Routing + SSR |
-| Nuxt Router | 30KB+ | Routing + SSR + Meta |
-
-### Runtime Performance Comparison
-
-#### Traditional SPA Routing
-```
-Route Change Process:
-├── 1️⃣ Parse route
-├── 2️⃣ Load component bundle
-├── 3️⃣ Execute component code
-├── 4️⃣ Load template (if separate)
-├── 5️⃣ Load styles (if separate)
-├── 6️⃣ Apply i18n translations
-├── 7️⃣ Check authentication
-└── 8️⃣ Render component
-
-Total: Multiple operations + Bundle parsing
-```
+// Check if state exists
+if (this.$state.has('user')) {
+    console.log('User is logged in');
+}
 
-#### ViewLogic Router (Production)
-```
-Route Change Process:
-├── 1️⃣ Load pre-built route bundle (all-in-one)
-└── 2️⃣ Render component
+// Watch for changes (reactive)
+this.$state.watch('user', (newValue, oldValue) => {
+    console.log('User changed:', newValue);
+    this.updateUI();
+});
 
-Total: Single optimized operation
+// Bulk updates
+this.$state.update({
+    theme: 'dark',
+    language: 'ko',
+    sidebar: 'collapsed'
+});
+
+// Get all state
+const allState = this.$state.getAll();
+
+// Clear specific state
+this.$state.delete('temporaryData');
 ```
 
-### Performance Advantages
-- **🚀 75% Faster Loading** - Pre-bundled routes vs on-demand compilation
-- **📦 Smaller Footprint** - 13KB includes everything others need 30KB+ for
-- **⚡ Instant Navigation** - No build-time compilation in production
-- **🎯 Route-Level Optimization** - Each route is independently optimized
-- **💾 Superior Caching** - Route-level caching vs component-level caching
-- **🔄 Zero Hydration** - No server-side rendering complexity
+### Authentication System
 
-### Why ViewLogic Router Wins
-1. **Pre-compilation**: Routes are pre-built, not compiled at runtime
-2. **All-in-One Bundles**: View + Logic + Style in single optimized file
-3. **Zero Dependencies**: No additional libraries needed for full functionality
-4. **Smart Caching**: Route-level caching with intelligent invalidation
-5. **Optimized Architecture**: Purpose-built for maximum performance
-6. **Revolutionary Components**: DynamicInclude & HtmlInclude for dynamic content loading
+Complete authentication management:
 
-## 🚀 Revolutionary Built-in Components
+```javascript
+// Check authentication status
+if (this.isAuth()) {
+    console.log('User is logged in');
+}
 
-ViewLogic Router includes groundbreaking components that revolutionize how you handle dynamic content:
+// Login with token
+this.setToken('jwt-token-here');
 
-### DynamicInclude Component
-```html
-<!-- Dynamically load content from any URL -->
-<DynamicInclude 
-    page="login" 
-    :use-cache="false"
-    loading-text="로그인 페이지 로딩 중..."
-    wrapper-class="test-dynamic-include"
-    :params="{ 
-        returnUrl: '/dashboard', 
-        showWelcome: true,
-        theme: 'compact',
-        testMode: true
-    }"
-/>
-```
+// Login with options
+this.setToken('jwt-token', {
+    storage: 'localStorage',  // 'localStorage', 'sessionStorage', 'cookie'
+    skipValidation: false     // Skip JWT validation
+});
 
-**Features:**
-- **Dynamic URL Loading** - Load content from any REST API or URL
-- **Parameter Injection** - Pass dynamic parameters to the URL
-- **Event Handling** - React to loading states and errors
-- **Slot Support** - Custom loading and error templates
-- **Cache Integration** - Automatic caching with TTL support
+// Get current token
+const token = this.getToken();
 
-### HtmlInclude Component
-```html
-<!-- Include raw HTML content with Vue reactivity -->
-<HtmlInclude 
-    src="/src/views/404.html"
-    :sanitize="true"
-    :use-cache="false"
-    loading-text="위젯 로딩 중..."
-    wrapper-class="test-html-include"
-/>
+// Logout (clears token and redirects to login)
+this.logout();
 ```
 
-**Features:**
-- **Raw HTML Rendering** - Safely render dynamic HTML content
-- **XSS Protection** - Built-in HTML sanitization
-- **Vue Integration** - HTML content works with Vue reactivity
-- **Fallback Support** - Default content when HTML is unavailable
-- **Script Execution** - Optional JavaScript execution in HTML content
-
-### Automatic Data Fetching with dataURL
+### API Management
 
-ViewLogic Router includes revolutionary automatic data fetching that eliminates manual API calls in component lifecycle hooks.
+Built-in HTTP client with automatic token injection:
 
-#### Single API (Simple Usage)
 ```javascript
-// src/logic/products/list.js
-export default {
-    name: 'ProductsList',
-    dataURL: '/api/products',  // ✨ Magic happens here!
-    data() {
-        return {
-            title: 'Our Products'
-            // products: [] - No need to declare, auto-populated from API
-        };
-    },
-    mounted() {
-        // Data is already fetched and available!
-        console.log('Products loaded:', this.products);
-        console.log('Loading state:', this.$dataLoading);
-    },
-    methods: {
-        async refreshData() {
-            // Manual refresh if needed
-            await this.$fetchData();
-        }
-    }
-};
-```
+// GET request
+const users = await this.$api.get('/api/users');
 
-#### Multiple APIs (Advanced Usage) - 🆕 Revolutionary!
-```javascript
-// src/logic/dashboard/main.js
+// GET with query parameters
+const filteredUsers = await this.$api.get('/api/users', {
+    params: { role: 'admin', active: true }
+});
+
+// POST with data
+const newUser = await this.$api.post('/api/users', {
+    name: 'John',
+    email: 'john@example.com'
+});
+
+// PUT/PATCH/DELETE
+await this.$api.put('/api/users/{userId}', userData);
+await this.$api.patch('/api/users/{userId}', partialData);
+await this.$api.delete('/api/users/{userId}');
+
+// Parameter substitution (automatically uses route/query params)
+// If current route is /users?userId=123, this becomes /api/users/123
+const user = await this.$api.get('/api/users/{userId}');
+
+// Automatic data loading in components
 export default {
-    name: 'DashboardMain',
+    // Single API endpoint
+    dataURL: '/api/user/profile',
+
+    // Multiple endpoints
     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!
-        };
+        profile: '/api/user/profile',
+        posts: '/api/posts?userId={userId}',
+        notifications: '/api/notifications'
     },
+
     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);
+        // Data automatically loaded and available as:
+        // this.profile, this.posts, this.notifications
     },
+
     methods: {
-        async refreshProducts() {
-            // Refresh specific API only
-            await this.$fetchData('products');
+        // Manual data refresh - reuses dataURL configuration
+        async refreshData() {
+            await this.fetchData();
+            // All dataURL endpoints are called again
+        },
+
+        // Refresh when filters change
+        async applyFilter(filterType) {
+            this.$query.filter = filterType;
+            await this.fetchData(); // Refetch with new filter parameter
+        },
+
+        // Refresh when user changes
+        async switchUser(newUserId) {
+            this.$params.userId = newUserId;
+            await this.fetchData(); // Refetch with new userId parameter
         },
-        async refreshStats() {
-            // Refresh specific API only
-            await this.$fetchData('stats');
+
+        // Pagination
+        async changePage(page) {
+            this.$query.page = page;
+            await this.fetchData(); // Load new page data
         },
-        async refreshAllData() {
-            // Refresh all APIs
-            await this.$fetchAllData();
+
+        // Custom data loading
+        async loadSpecificData() {
+            const customData = await this.fetchData({
+                profile: '/api/admin/profile',
+                stats: '/api/stats?period={period}'
+            });
+            // Override default dataURL temporarily
         }
     }
 };
 ```
 
-**Features:**
-- **Zero-Config API Calls** - Just define `dataURL` and data is automatically fetched
-- **🆕 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
-- **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
+### Internationalization
 
-### Why These Components Are Revolutionary
+Comprehensive i18n system:
 
-**Traditional Approach**: 30+ lines of loading states, error handling, and manual API calls.
+```javascript
+// Simple translation
+const message = this.$t('welcome.message');
 
-**ViewLogic Approach**: `dataURL: '/api/products'` - That's it! Data automatically fetched and available as `this.products`.
+// With parameters
+const greeting = this.$t('hello.user', { name: 'John', role: 'admin' });
 
-### Common Use Cases
-- **Single API**: `dataURL: '/api/products'` - Product listings, user profiles, articles
-- **Multiple APIs**: `dataURL: { stats: '/api/stats', users: '/api/users' }` - Dashboards, admin panels
-- **Dynamic Content**: `<DynamicInclude page="login" :params="{ theme: 'compact' }" />`
-- **HTML Includes**: `<HtmlInclude src="/widgets/weather.html" :sanitize="true" />`
+// Nested keys
+const errorMsg = this.$t('errors.validation.email.required');
 
-### Advantages
-- ✅ **Auto Data Fetching** with `dataURL` property (others: manual logic)
-- ✅ **Parameter Integration** - Query params sent automatically
-- ✅ **Loading States** - `$dataLoading` auto-managed
-- ✅ **Built-in Security** - HTML sanitization included
-- ✅ **Zero Setup** - Works immediately without configuration
+// Check current language
+const currentLang = this.getLanguage();
 
-## 🔥 RESTful API Calls with $api Pattern
+// Change language (automatically reloads interface)
+await this.setLanguage('ko');
+```
 
-ViewLogic introduces a clean, RESTful API calling pattern with automatic parameter substitution and authentication handling.
+### Logging & Error Handling
 
-### Basic API Usage
+Built-in logging system for debugging and error tracking:
 
 ```javascript
-// src/logic/user-profile.js
 export default {
-    name: 'UserProfile',
-    
     async mounted() {
-        try {
-            // GET request with automatic parameter substitution
-            const user = await this.$api.get('/api/users/{userId}');
-            
-            // POST request with data
-            const response = await this.$api.post('/api/users/{userId}/posts', {
-                title: 'New Post',
-                content: 'Post content here'
-            });
-            
-            // PUT request for updates
-            await this.$api.put('/api/users/{userId}', {
-                name: user.name,
-                email: user.email
-            });
-            
-            // DELETE request
-            await this.$api.delete('/api/posts/{postId}');
-            
-        } catch (error) {
-            console.error('API call failed:', error);
-            this.handleError(error);
-        }
-    }
-};
-```
-
-### Advanced API Features
+        this.log('info', 'Component mounted successfully');
+    },
 
-```javascript
-export default {
     methods: {
-        async handleUserActions() {
-            // With custom headers
-            const data = await this.$api.get('/api/protected-data', {
-                headers: { 'X-Custom-Header': 'value' }
-            });
-            
-            // File upload with FormData
-            const formData = new FormData();
-            formData.append('file', this.selectedFile);
-            await this.$api.post('/api/upload', formData);
-            
-            // With query parameters (automatically added from current route)
-            // URL: /users?id=123 → API call includes ?id=123
-            const result = await this.$api.get('/api/user-data');
+        async handleUserAction() {
+            this.log('debug', 'User action started', { action: 'submit' });
+
+            try {
+                const result = await this.$api.post('/api/users', userData);
+                this.log('info', 'User created successfully', result);
+            } catch (error) {
+                this.log('error', 'Failed to create user:', error);
+            }
         },
-        
-        // Error handling patterns
-        async safeApiCall() {
+
+        async loadData() {
+            this.log('debug', 'Loading user data...');
+
             try {
-                const user = await this.$api.get('/api/users/{userId}');
-                this.user = user;
-                
+                const data = await this.fetchData();
+                this.log('info', 'Data loaded', { count: data.length });
             } catch (error) {
-                if (error.message.includes('404')) {
-                    this.showError('User not found');
-                } else if (error.message.includes('401')) {
-                    this.navigateTo('login');
-                } else {
-                    this.showError('Something went wrong');
-                }
+                this.log('warn', 'Data loading failed, using cache', error);
             }
         }
     }
 };
 ```
 
-### Key $api Features
-
-- **🎯 Parameter Substitution**: `{userId}` automatically replaced with component data or route params
-- **🔐 Auto Authentication**: Authorization headers automatically added when token is available  
-- **📄 Smart Data Handling**: JSON and FormData automatically detected and processed
-- **🔗 Query Integration**: Current route query parameters automatically included
-- **⚡ Error Standardization**: Consistent error format across all API calls
-- **🚀 RESTful Pattern**: Clean `get()`, `post()`, `put()`, `patch()`, `delete()` methods
+**Log Levels:**
+- `debug` - Development debugging information
+- `info` - General information and success messages
+- `warn` - Warning messages for recoverable issues
+- `error` - Error messages for failures
 
-## 📝 Advanced Form Handling with Smart Features
+All logs include the component name automatically: `[routeName] Your message`
 
-ViewLogic Router includes revolutionary automatic form handling with duplicate prevention, validation, and error handling. Just define your forms with `action` attributes and the router handles everything!
+### Navigation & Routing
 
-### Basic Form Handling
-
-```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>
-```
+Simple yet powerful routing system:
 
 ```javascript
-// src/logic/contact.js
-export default {
-    name: 'ContactPage',
-    mounted() {
-        // Forms are automatically bound with smart features:
-        // ✅ Duplicate submission prevention
-        // ✅ Automatic validation
-        // ✅ Loading state management
-        // ✅ Error handling
-        console.log('Smart form handling is automatic!');
-    }
-};
-```
-
-### Smart Form Features - 🆕 Enhanced!
+// Navigate to route
+this.navigateTo('user-profile');
 
-ViewLogic FormHandler now includes advanced features for production-ready applications:
+// With query parameters
+this.navigateTo('user-profile', { userId: 123, tab: 'settings' });
 
-```html
-<!-- Smart form with all features -->
-<form action="/api/users/{userId}/update" method="PUT" 
-      class="auto-form"
-      data-success-handler="handleSuccess"
-      data-error-handler="handleError"
-      data-loading-handler="handleLoading"
-      data-redirect="/profile">
-    
-    <input type="text" name="name" required 
-           data-validation="validateName">
-    <input type="email" name="email" required>
-    <button type="submit">Update Profile</button>
-</form>
-```
+// Object syntax
+this.navigateTo({
+    route: 'search-results',
+    params: { query: 'vue', category: 'tutorials' }
+});
 
-```javascript
-export default {
-    methods: {
-        // Custom validation
-        validateName(value) {
-            return value.length >= 2 && value.length <= 50;
-        },
-        
-        // Success handler
-        handleSuccess(response, form) {
-            this.showToast('Profile updated successfully!', 'success');
-            // Automatic redirect to /profile happens after this
-        },
-        
-        // Error handler with smart error detection
-        handleError(error, form) {
-            if (error.message.includes('validation')) {
-                this.showToast('Please check your input', 'warning');
-            } else {
-                this.showToast('Update failed. Please try again.', 'error');
-            }
-        },
-        
-        // Loading state handler
-        handleLoading(isLoading, form) {
-            const button = form.querySelector('button[type="submit"]');
-            button.disabled = isLoading;
-            button.textContent = isLoading ? 'Updating...' : 'Update Profile';
-        }
-    }
-};
 ```
 
-### Key Form Features
-
-- **🚫 Duplicate Prevention**: Automatic duplicate submission blocking
-- **⏱️ Timeout Management**: 30-second default timeout with abort capability
-- **✅ Built-in Validation**: HTML5 + custom validation functions
-- **🔄 Loading States**: Automatic loading state management
-- **🎯 Smart Error Handling**: Network vs validation error distinction
-- **📄 File Upload Support**: Automatic FormData vs JSON detection
-- **🔀 Auto Redirect**: Post-success navigation
-- **🏷️ Parameter Substitution**: Dynamic URL parameter replacement
 
-### Variable Parameter Forms - Revolutionary!
+### Form Handling
 
-The most powerful feature is **variable parameter support** in action URLs. You can use simple template syntax to inject dynamic values:
+Revolutionary automatic form processing with parameter substitution:
 
 ```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>
+<!-- Basic form - automatically handled on submit -->
+<form action="/api/users" method="POST"
+      data-success="onUserCreated"
+      data-error="onUserError"
+      data-loading="setLoading">
+    <input name="name" v-model="userData.name" required>
+    <input name="email" v-model="userData.email" type="email" required>
+    <button type="submit">Create User</button>
+</form>
+
+<!-- Form with parameter substitution -->
+<form action="/api/users/{userId}" method="PUT"
+      data-success="onUserUpdated"
+      data-redirect="user-profile">
+    <input name="name" v-model="user.name">
+    <input name="email" v-model="user.email">
+    <button type="submit">Update User</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>
+<!-- File upload form -->
+<form action="/api/upload" method="POST" enctype="multipart/form-data"
+      data-success="onFileUploaded">
+    <input name="avatar" type="file" accept="image/*">
+    <input name="description" v-model="description">
+    <button type="submit">Upload</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 with custom validation -->
+<form action="/api/contact" method="POST">
+    <input name="email" type="email" data-validation="validateEmail" required>
+    <textarea name="message" data-validation="validateMessage" required></textarea>
+    <button type="submit">Send Message</button>
 </form>
 ```
 
 ```javascript
-// Component logic - parameters are resolved automatically
+// Component logic with form handlers
 export default {
-    name: 'UserProfile',
     data() {
         return {
-            userId: 123,    // {userId} will be replaced with this value
-            orderId: 456    // {orderId} will be replaced with this value
+            userData: { name: '', email: '' },
+            user: { name: 'John', email: 'john@example.com' },
+            loading: false
         };
     },
     methods: {
-        handlePostSuccess(response) {
-            console.log('Post created successfully!', response);
+        // Success handlers
+        onUserCreated(response, form) {
+            this.$state.set('newUser', response);
+            this.navigateTo('user-profile', { userId: response.id });
         },
-        orderUpdated(response) {
-            console.log('Order updated!', response);
-        }
-    }
-};
-```
 
-### How Parameter Resolution Works
+        onUserUpdated(response, form) {
+            this.$state.set('currentUser', response);
+            // Auto redirect via data-redirect="user-profile"
+        },
 
-Parameters are resolved automatically from multiple sources in this order:
+        onFileUploaded(response, form) {
+            this.$state.set('uploadedFile', response.file);
+        },
 
-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
+        // Error handler
+        onUserError(error, form) {
+            console.error('User operation failed:', error);
+        },
 
-```javascript
-// 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() {
-        // Route parameters also work: /user-profile?userId=789
-        // {userId} will use 789 from URL, or fall back to data() value of 123
-    }
-};
-```
+        // Loading handler
+        setLoading(isLoading, form) {
+            this.loading = isLoading;
+        },
 
-### Event Handlers
-```html
-<form action="/api/subscribe" method="POST"
-      data-success="subscriptionSuccess" data-error="subscriptionError">
-    <input type="email" name="email" required>
-    <button type="submit">Subscribe</button>
-</form>
-```
-```javascript
-export default {
-    methods: {
-        subscriptionSuccess(response) { this.$toast('Success!', 'success'); },
-        subscriptionError(error) { this.$toast('Failed!', 'error'); }
+        // Custom validation functions
+        validateEmail(value, input) {
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            return emailRegex.test(value);
+        },
+
+        validateMessage(value, input) {
+            return value.length >= 10;
+        }
     }
 };
 ```
 
-### Form Options
-```html
-<form action="/api/resource/{id}" method="POST"
-      data-success="handleSuccess"    data-error="handleError"
-      data-redirect="/success"        data-confirm="Sure?"
-      enctype="multipart/form-data">
-    <input name="title" required>
-    <input type="file" name="file" accept=".pdf">
-    <button type="submit">Submit</button>
-</form>
-```
-
-### Authentication Integration
-```html
-<!-- Auth tokens automatically included for authenticated users -->
-<form action="/api/protected/resource" method="POST">
-    <input name="data" required>
-    <button type="submit">Save</button>
-</form>
-<!-- Authorization: Bearer <token> header added automatically -->
-```
+## ⚙️ Configuration
 
-### Form Validation
-```html
-<!-- HTML5 + custom validation -->
-<form action="/api/register" method="POST">
-    <input type="email" name="email" required pattern="...">
-    <input type="password" name="password" minlength="8" required>
-    <button type="submit">Register</button>
-</form>
-```
+### Basic Configuration
 
-### Real-World Form Examples
-```html
-<!-- User profile with dynamic parameters -->
-<form action="/api/users/{userId}" method="PUT" data-success="profileUpdated">
-    <input name="firstName" required>
-    <button type="submit">Update</button>
-</form>
+```javascript
+const router = new ViewLogicRouter({
+    // Core routing settings
+    basePath: '/',                      // Base path for the application
+    mode: 'hash',                       // 'hash' or 'history'
+
+    // Authentication settings
+    authEnabled: true,                  // Enable authentication system
+    loginRoute: 'login',                // Route name for login page
+    protectedRoutes: ['dashboard', 'profile', 'admin'],
+    protectedPrefixes: ['admin/', 'secure/'],
+    publicRoutes: ['login', 'register', 'home', 'about'],
+    authStorage: 'localStorage',        // 'localStorage', 'sessionStorage', 'cookie'
 
-<!-- Order management -->
-<form action="/api/orders/{orderId}/status" method="PUT">
-    <select name="status" required>
-        <option value="pending">Pending</option>
-        <option value="shipped">Shipped</option>
-    </select>
-    <button type="submit">Update</button>
-</form>
+    // Internationalization
+    useI18n: true,                      // Enable i18n system
+    defaultLanguage: 'en',              // Default language
+    i18nPath: '/i18n',                  // Path to language files
+
+    // Caching system
+    cacheMode: 'memory',                // Memory caching only
+    cacheTTL: 300000,                   // Cache TTL in milliseconds (5 minutes)
+    maxCacheSize: 100,                  // Maximum number of cached items
+
+    // API settings
+    apiBaseURL: '/api',                 // Base URL for API requests
+    apiTimeout: 10000,                  // Request timeout in milliseconds
+
+    // Development settings
+    environment: 'development',         // 'development' or 'production'
+    logLevel: 'info'                    // 'error', 'warn', 'info', 'debug'
+});
 ```
 
-### Form Handling Advantages
-- ✅ **Zero Setup** - Just add `action` attribute vs manual event handlers
-- ✅ **Variable Parameters** - `{userId}` template syntax vs manual interpolation  
-- ✅ **Auto Authentication** - Tokens injected automatically
-- ✅ **File Uploads** - Automatic multipart support
-- ✅ **Built-in Validation** - HTML5 + custom functions
-
-### Code Comparison
-**Traditional**: 30+ lines of boilerplate for forms, API calls, loading states  
-**ViewLogic**: 5 lines with `action` attribute + callback method  
-**Result**: 80% less code, more features included
-
-## 🔗 Query-Based Parameter System: Revolutionary Simplicity
-
-ViewLogic Router's **Query-Based Parameter System** is a key feature that eliminates routing complexity:
-
-**Philosophy**: **Everything is query-based** - no complex path parameters like `/users/:id`. Just simple, clean URLs: `/users?id=123`.
+### Advanced Configuration
 
-### Revolutionary Benefits
-1. **📍 Simple URLs**: `/product?id=123&category=electronics` (clear and readable)
-2. **🎯 Consistent Access**: Always use `this.getParam('id')` - never mix path/query paradigms
-3. **⚡ No Route Configuration**: No complex route definitions or parameter mappings needed
-4. **🔍 SEO Friendly**: Descriptive parameter names make URLs self-documenting
-5. **🌐 Universal Compatibility**: Query parameters work everywhere - no framework lock-in
-
-### Simple Usage Example
 ```javascript
-// Navigate - simple and intuitive
-this.navigateTo('products', { id: 123, category: 'electronics' });
-// → /products?id=123&category=electronics
-
-// Access parameters - always the same way
-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
+const router = new ViewLogicRouter({
+    // Custom authentication function
+    authEnabled: true,
+    checkAuthFunction: async (route) => {
+        try {
+            // Use ViewLogic APIs like in components
+            const userData = await route.$api.get('/api/auth/verify');
+            route.$state.set('currentUser', userData);
+            return true;
+        } catch (error) {
+            console.error('Auth verification failed:', error);
+            return false;
+        }
     }
-};
+});
 ```
 
-### Why Query-Based is Revolutionary
-**Traditional Routers**: Complex path parameters (`/users/:id/posts/:postId`) require route configuration, parameter extraction logic, and mixed paradigms.
+## 🔧 Production Build
 
-**ViewLogic Router**: Simple query parameters (`/users?id=123&postId=456`) work universally with consistent `getParam()` access.
+```bash
+# Development mode (zero build)
+npm run dev
 
+# Production build with optimization
+npm run build
 
-## 🛡️ Error Handling
+# Preview production build
+npm run serve
+```
 
-Built-in comprehensive error handling with automatic 404 detection, graceful component loading failures, and parameter validation with fallbacks.
+### Production Optimizations
 
-## 🚀 Production Deployment
+ViewLogic Router automatically optimizes for 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/`)
+- **Code splitting**: Each route becomes a separate bundle
+- **Tree shaking**: Unused features are eliminated
+- **Minification**: Code is compressed and optimized
+- **Caching**: Aggressive caching for static assets
+- **Lazy loading**: Routes and components load on demand
 
-**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
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+We welcome contributions! Please read our [Contributing Guide](CONTRIBUTING.md) for details on:
 
-## 📄 License
+- Code style and conventions
+- Testing requirements
+- Pull request process
+- Issue reporting guidelines
 
-MIT License - see the [LICENSE](LICENSE) file for details.
+## 📄 License
 
-## 🙏 Author
+MIT License - see [LICENSE](LICENSE) file for details.
 
-Created by [hopegiver](https://github.com/hopegiver)
+## 🙏 Acknowledgments
 
-## 📞 Support
+Built with ❤️ for the Vue.js community. Special thanks to:
 
-- 🐛 Issues: [GitHub Issues](https://github.com/hopegiver/viewlogic/issues)
-- 💬 Discussions: [GitHub Discussions](https://github.com/hopegiver/viewlogic/discussions)
+- Vue.js team for the amazing framework
+- The open-source community for inspiration and feedback
+- All contributors who helped shape ViewLogic Router
 
 ---
 
-<p align="center">Made with ❤️ for the Vue.js community</p>
+**ViewLogic Router** - One framework to rule them all! 🚀
+
+*Simplify your Vue development with the power of unified architecture.*