viewlogic 1.2.1 → 1.2.3

package/README.md

@@ -12,7 +12,7 @@
   </a>
 </p>
 
-> A revolutionary Vue 3 routing system with View-Logic separation and Zero Build Development
+> **Complete Vue 3 Framework**: Routing + State Management + Authentication + i18n + Caching + API + Forms
 
 ## 🎯 Core Philosophy: Simplicity Through Design
 
@@ -24,907 +24,812 @@ ViewLogic Router revolutionizes Vue development with two fundamental core princi
 ### 🚀 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.
 
+## 🚀 Why Choose ViewLogic Router?
+
+**All-in-One Solution** - Replace 7+ libraries with one unified framework:
+- 🔀 **Vue Router** → ViewLogic Routing
+- 📦 **Pinia/Vuex** → StateHandler
+- 🔐 **Auth Libraries** → AuthManager
+- 🌐 **Vue I18n** → I18nManager
+- 💾 **Cache Libraries** → CacheManager
+- 🌐 **API Libraries** → ApiHandler
+- 📝 **Form Libraries** → FormHandler
+
+**Tiny Bundle Size** - Complete framework in just 51KB minified / 17KB gzipped!
+
+**Easy Integration** - Drop-in UMD build available for instant usage without build tools.
+
 ## ✨ Key Features
 
-- 🚀 **Ultra-Lightweight** - Complete routing system in just 13KB gzipped (48KB minified)
-- 🔄 **Multiple API Support** - Parallel data fetching from multiple APIs with named data storage  
+- 🚀 **Ultra-Lightweight** - Complete routing system with zero dependencies and optimized codebase
+- 🔄 **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
+- 💾 **Smart Caching** - Intelligent route and component caching with TTL and LRU eviction
+- 🔐 **Authentication** - Built-in JWT auth management with multiple storage options
+- 🌐 **i18n Ready** - Built-in internationalization support with lazy loading
+- 📊 **State Management** - Reactive state management without external dependencies
+
+### What's Included
+- ✅ Complete routing system with hash/history mode
+- ✅ Advanced caching with TTL and size limits
+- ✅ Built-in authentication with multiple storage options
+- ✅ Internationalization system with lazy loading
+- ✅ Form handling with automatic validation
+- ✅ RESTful API client with parameter substitution
+- ✅ Component loading and management
+- ✅ Error handling and logging system
+- ✅ Query parameter management
+- ✅ Layout system with slot-based composition
+- ✅ Global state management with reactivity
+- ✅ Event system for component communication
 
-## 📦 Installation
+## 🏗️ Project Structure
 
-Create a new ViewLogic project with our complete template:
+ViewLogic Router follows a clean, intuitive folder structure that promotes maintainability:
 
-```bash
-npm create viewlogic my-app
-cd my-app
-# Ready to go! No additional setup needed
 ```
-
-Or manually install the router only:
-```bash
-npm install viewlogic
+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/             # CSS files
+│   │   ├── home.css
+│   │   └── global.css
+│   └── locales/            # i18n files (optional)
+│       ├── en.json
+│       └── ko.json
+├── index.html              # Main entry point
+├── package.json
+└── config.json             # Optional configuration
 ```
 
 ## 🚀 Quick Start
 
-### Development Mode (No Build Required!)
+### Method 1: ES6 Modules (Recommended)
+
+```bash
+npm install viewlogic
+```
 
 ```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>
 </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',
+    <script type="module">
+        import { ViewLogicRouter } from 'viewlogic';
+        const router = new ViewLogicRouter({
+            authEnabled: true,
+            useI18n: true
         });
     </script>
 </body>
 </html>
 ```
 
-### Production Mode (Optimized Bundles)
+### Method 2: UMD Build (No Build Tools)
 
 ```html
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset="UTF-8">
     <title>My ViewLogic App</title>
-    <link rel="stylesheet" href="/css/base.css">
+    <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 (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({
-            environment: 'production',
-            useI18n: true,
-            logLevel: 'error'          // Only log errors
-        });
+        const router = new ViewLogicRouter();
     </script>
 </body>
 </html>
 ```
 
-### ES6 Module Usage
+### Create Your First Route
 
-```javascript
-import { ViewLogicRouter } from 'js/viewlogic-router.js';
-
-// 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>
+    <p>Counter: {{ count }} | Global Count: {{ globalCount }}</p>
+    <button @click="increment">Local +1</button>
+    <button @click="incrementGlobal">Global +1</button>
+    <button @click="saveUser" :disabled="loading">
+        {{ loading ? 'Saving...' : 'Save User' }}
+    </button>
+    <div v-if="user">
+        <h3>{{ $t('welcome.message', { name: user.name }) }}</h3>
+    </div>
+</div>
 ```
 
-### CommonJS/Node.js Usage
-
+**src/logic/home.js**
 ```javascript
-const { createRouter } = require('js/viewlogic-router.umd.js');
-
-createRouter({
-    environment: 'development'
-}).then(router => {
-    console.log('Router ready');
-});
+export default {
+    data() {
+        return {
+            message: 'Welcome to ViewLogic!',
+            count: 0,
+            loading: false
+        };
+    },
+    computed: {
+        globalCount() {
+            return this.$state.get('globalCounter', 0);
+        },
+        user() {
+            return this.$state.get('currentUser');
+        }
+    },
+    methods: {
+        increment() {
+            this.count++;
+        },
+        incrementGlobal() {
+            const current = this.$state.get('globalCounter', 0);
+            this.$state.set('globalCounter', current + 1);
+        },
+        async saveUser() {
+            this.loading = true;
+            try {
+                const userData = {
+                    name: 'John Doe',
+                    email: 'john@example.com'
+                };
+
+                const savedUser = await this.$api.post('/api/users', userData);
+                this.$state.set('currentUser', savedUser);
+
+                this.$toast?.success?.('User saved successfully!');
+            } catch (error) {
+                this.$toast?.error?.('Failed to save user');
+            } finally {
+                this.loading = false;
+            }
+        }
+    },
+    mounted() {
+        // Watch for global state changes
+        this.$state.watch('currentUser', (newUser) => {
+            console.log('User changed globally:', newUser);
+        });
+    }
+};
 ```
 
-## 📁 Project Structure
+## 🎯 Core APIs
 
-### 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
-```
+### State Management
 
-### 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
-```
-
-## 🔧 Configuration Options
+ViewLogic Router includes a powerful built-in state management system:
 
 ```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
-};
-```
+// Set state (any component can access)
+this.$state.set('user', { name: 'John', age: 30 });
+this.$state.set('theme', 'dark');
+this.$state.set('shoppingCart', []);
+
+// Get state with optional default
+const user = this.$state.get('user');
+const theme = this.$state.get('theme', 'light');
+
+// Check if state exists
+if (this.$state.has('user')) {
+    console.log('User is logged in');
+}
 
-### 🏗️ Subfolder Deployment Support
+// Watch for changes (reactive)
+this.$state.watch('user', (newValue, oldValue) => {
+    console.log('User changed:', newValue);
+    this.updateUI();
+});
 
-ViewLogic Router supports deployment in subfolders with smart path resolution:
+// Stop watching
+this.$state.unwatch('user', callbackFunction);
 
-```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
+// Bulk updates
+this.$state.update({
+    theme: 'dark',
+    language: 'ko',
+    sidebar: 'collapsed'
 });
 
-// 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)
-});
+// Get all state
+const allState = this.$state.getAll();
 
-// 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)
-});
+// Clear specific state
+this.$state.delete('temporaryData');
 ```
 
-**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
+### Authentication System
 
-Both routing modes work seamlessly in subfolder deployments:
+Complete authentication management with multiple storage options:
 
 ```javascript
-// Hash Mode (recommended for subfolders)
-// URL: https://example.com/myapp/#/products?id=123
-ViewLogicRouter({ 
-    mode: 'hash'           // Works anywhere, no server config needed
-});
-
-// History Mode (requires server configuration)
-// URL: https://example.com/myapp/products?id=123  
-ViewLogicRouter({ 
-    mode: 'history'        // Cleaner URLs, needs server setup
-});
-```
-
-**History Mode Server Configuration:**
-```nginx
-# Nginx - redirect all subfolder requests to index.html
-location /myapp/ {
-    try_files $uri $uri/ /myapp/index.html;
+// Check authentication status
+if (this.$isAuthenticated()) {
+    console.log('User is logged in');
 }
-```
-
-```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]
-```
 
-## 📖 Complete API Documentation
+// Login with token
+this.$setToken('jwt-token-here');
 
-For comprehensive API documentation including all methods, configuration options, and detailed examples, see:
+// Login with options
+this.$setToken('jwt-token', {
+    storage: 'localStorage',  // 'localStorage', 'sessionStorage', 'cookie'
+    skipValidation: false     // Skip JWT validation
+});
 
-**📚 [Complete API Reference →](./docs/index.md)**
+// Get current token
+const token = this.$getToken();
 
-### Quick API Overview
+// Login success handling (redirects to protected route or default)
+this.$loginSuccess('/dashboard');
 
-```javascript
-// Basic router usage
-const router = new ViewLogicRouter({ environment: 'development' });
-router.navigateTo('products', { id: 123, category: 'electronics' });
-const current = router.getCurrentRoute();
+// Logout (clears token and redirects to login)
+this.$logout();
 
-// In route components - global methods automatically available:
-export default {
-    dataURL: '/api/products', // Auto-fetch data
-    mounted() {
-        const id = this.getParam('id');           // Get parameter
-        this.navigateTo('detail', { id });        // Navigate
-        console.log('Data loaded:', this.products); // From dataURL
-        if (this.$isAuthenticated()) { /* auth check */ }
-        const text = this.$t('welcome.message');   // i18n
-    }
-};
+// Manual auth check for specific route
+const authResult = await this.$checkAuth('admin-panel');
+if (authResult.allowed) {
+    // User can access admin panel
+}
 ```
 
-### Key Global Methods (Auto-available in all route components)
-- **Navigation**: `navigateTo()`, `getCurrentRoute()`
-- **Parameters**: `getParams()`, `getParam(key, defaultValue)`
-- **Data Fetching**: `$fetchData()`, `$fetchAllData()` (with dataURL)
-- **Authentication**: `$isAuthenticated()`, `$getToken()`, `$logout()`
-- **Forms**: Auto-binding with `action` attribute and `{param}` templates
-- **i18n**: `$t(key, params)` for translations
+### API Management
+
+Built-in HTTP client with automatic token injection and parameter substitution:
 
-### Auto-Injected Properties
 ```javascript
-// Automatically available in every route component:
-// currentRoute, $query, $lang, $dataLoading
-```
+// GET request
+const users = await this.$api.get('/api/users');
 
-## 🎯 View-Logic Separation: Core Philosophy in Action
+// GET with query parameters
+const filteredUsers = await this.$api.get('/api/users', {
+    params: { role: 'admin', active: true }
+});
 
-ViewLogic Router's fundamental philosophy of **View-Logic Separation** creates clear boundaries between concerns:
+// POST with data
+const newUser = await this.$api.post('/api/users', {
+    name: 'John',
+    email: 'john@example.com'
+});
 
-### 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
+// 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}');
 
-### 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
+// 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}');
 
-### Example: Philosophy in Practice
-```javascript
-// src/logic/products.js - Pure business logic
+// Custom headers
+const response = await this.$api.post('/api/secure-endpoint', data, {
+    headers: { 'X-Custom-Header': 'value' }
+});
+
+// Automatic data loading in components
 export default {
-    name: 'ProductsList',
-    dataURL: '/api/products',  // Auto-fetch data
-    data() {
-        return { title: 'Our Products' };
+    // Single API endpoint
+    dataURL: '/api/user/profile',
+
+    // Multiple endpoints
+    dataURL: {
+        profile: '/api/user/profile',
+        posts: '/api/posts?userId={userId}',
+        notifications: '/api/notifications'
     },
-    methods: {
-        viewDetail(id) {
-            this.navigateTo('product-detail', { id });
-        }
+
+    mounted() {
+        // Data automatically loaded and available as:
+        // this.profile, this.posts, this.notifications
     }
 };
 ```
 
-### Production: Automatic Optimization
-All separate files automatically combine into optimized bundles in `routes/` folder - maintaining the development philosophy while optimizing for production.
-
-## 🔄 Zero Build Development vs Optimized Production
-
-ViewLogic Router's **Zero Build Development** (core philosophy) vs optimized production:
+### Internationalization
 
-| 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** |
+Comprehensive i18n system with lazy loading and pluralization:
 
 ```javascript
-// Zero Build Development (Core Philosophy)
-ViewLogicRouter({ environment: 'development' }); // Work directly with source files
+// Simple translation
+const message = this.$t('welcome.message');
 
-// Optimized Production  
-ViewLogicRouter({ environment: 'production' }); // Use pre-built bundles
-```
+// With parameters
+const greeting = this.$t('hello.user', { name: 'John', role: 'admin' });
 
-### 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
+// Nested keys
+const errorMsg = this.$t('errors.validation.email.required');
 
-## 🪶 Ultra-Lightweight Bundle
+// Plural forms
+const itemCount = this.$plural('items.count', count, { count });
+// items.count.singular: "{count} item"
+// items.count.plural: "{count} items"
 
-ViewLogic Router provides a complete routing solution in an incredibly small package:
+// Check current language
+const currentLang = this.$i18n.getCurrentLanguage();
 
-### Size Comparison
-- **ViewLogic Router**: 13KB gzipped (48KB minified)
-- **Vue Router + Auth + i18n + Cache**: 50KB+ gzipped
+// Change language (automatically reloads interface)
+await this.$i18n.setLanguage('ko');
 
-### 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
-```
+// Format dates/numbers according to locale
+const date = this.$i18n.formatDate(new Date(), {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+});
 
-#### ViewLogic Router (Production)
+const price = this.$i18n.formatNumber(1234.56, {
+    style: 'currency',
+    currency: 'USD'
+});
 ```
-Route Change Process:
-├── 1️⃣ Load pre-built route bundle (all-in-one)
-└── 2️⃣ Render component
 
-Total: Single optimized operation
-```
+### Navigation & Routing
 
-### 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
+Simple yet powerful routing 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
+```javascript
+// Navigate to route
+this.navigateTo('user-profile');
 
-## 🚀 Revolutionary Built-in Components
+// With query parameters
+this.navigateTo('user-profile', { userId: 123, tab: 'settings' });
 
-ViewLogic Router includes groundbreaking components that revolutionize how you handle dynamic content:
+// Object syntax
+this.navigateTo({
+    route: 'search-results',
+    params: { query: 'vue', category: 'tutorials' }
+});
 
-### 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
-    }"
-/>
-```
+// Get current route information
+const currentRoute = this.$route.current;
+const routeParams = this.$route.params;
+const queryParams = this.$route.query;
 
-**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
+// Access specific parameters
+const userId = this.$params.userId;        // Route parameter
+const tab = this.$query.tab;               // Query parameter
+const searchTerm = this.$param('search');  // Either route or query param
 
-### 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"
-/>
+// Check if route is protected
+const isProtected = this.$route.isProtected('admin-dashboard');
+
+// Navigate with state preservation
+this.navigateTo('dashboard', {
+    preserveState: true,
+    scrollTop: false
+});
 ```
 
-**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
+### Form Handling
 
-### Automatic Data Fetching with dataURL
+Revolutionary form processing with automatic parameter substitution:
 
-ViewLogic Router includes revolutionary automatic data fetching that eliminates manual API calls in component lifecycle hooks.
+```html
+<!-- Basic form with automatic handling -->
+<form action="/api/users" method="POST">
+    <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>
 
-#### 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();
-        }
-    }
-};
+<!-- Form with parameter substitution -->
+<form action="/api/users/{userId}" method="PUT">
+    <input name="name" v-model="user.name">
+    <input name="email" v-model="user.email">
+    <button type="submit">Update User</button>
+</form>
+
+<!-- File upload form -->
+<form action="/api/upload" method="POST" enctype="multipart/form-data">
+    <input name="avatar" type="file" accept="image/*">
+    <input name="description" v-model="description">
+    <button type="submit">Upload</button>
+</form>
 ```
 
-#### Multiple APIs (Advanced Usage) - 🆕 Revolutionary!
 ```javascript
-// src/logic/dashboard/main.js
+// Programmatic form submission
 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();
+        async submitForm() {
+            const formData = {
+                name: this.userData.name,
+                email: this.userData.email
+            };
+
+            try {
+                const result = await this.$form.submit('/api/users', formData, {
+                    method: 'POST',
+                    onProgress: (progress) => {
+                        this.uploadProgress = progress;
+                    }
+                });
+
+                this.$state.set('newUser', result);
+                this.navigateTo('user-profile', { userId: result.id });
+            } catch (error) {
+                this.handleError(error);
+            }
         }
     }
 };
 ```
 
-**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
+## ⚙️ Configuration
 
-### Why These Components Are Revolutionary
+### Basic Configuration
 
-**Traditional Approach**: 30+ lines of loading states, error handling, and manual API calls.
+```javascript
+const router = new ViewLogicRouter({
+    // Core routing settings
+    basePath: '/',                      // Base path for the application
+    mode: 'hash',                       // 'hash' or 'history'
 
-**ViewLogic Approach**: `dataURL: '/api/products'` - That's it! Data automatically fetched and available as `this.products`.
+    // State management (always enabled)
+    // No configuration needed - StateHandler is always available
 
-### 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" />`
+    // 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'
 
-### 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
+    // Internationalization
+    useI18n: true,                      // Enable i18n system
+    defaultLanguage: 'en',              // Default language
+    i18nPath: '/src/locales',          // Path to language files
+
+    // Caching system
+    cacheMode: 'memory',                // 'memory' only (others removed for simplicity)
+    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'
+});
+```
 
-## 📝 Automatic Form Handling with Variable Parameters
+### Advanced Configuration
 
-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!
+```javascript
+const router = new ViewLogicRouter({
+    // Custom authentication function
+    authEnabled: true,
+    checkAuthFunction: async (routeName) => {
+        const token = localStorage.getItem('authToken');
+        if (!token) return false;
+
+        try {
+            const response = await fetch('/api/auth/verify', {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json'
+                }
+            });
+
+            if (response.ok) {
+                const userData = await response.json();
+                // Store user data in global state
+                router.stateHandler.set('currentUser', userData);
+                return true;
+            }
+            return false;
+        } catch (error) {
+            console.error('Auth verification failed:', error);
+            return false;
+        }
+    },
 
-### Basic Form Handling
+    // Custom route loading
+    routeResolver: (routeName) => {
+        // Custom logic for resolving route files
+        if (routeName.startsWith('admin/')) {
+            return {
+                viewPath: `/admin/views/${routeName.slice(6)}.html`,
+                logicPath: `/admin/logic/${routeName.slice(6)}.js`
+            };
+        }
+        return null; // Use default resolution
+    },
 
-```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>
-```
+    // Global error handler
+    onError: (error, context) => {
+        console.error('ViewLogic Error:', error, context);
+        // Send to error tracking service
+        if (window.errorTracker) {
+            window.errorTracker.log(error, context);
+        }
+    },
 
-```javascript
-// src/logic/contact.js
-export default {
-    name: 'ContactPage',
-    mounted() {
-        // Forms are automatically bound - no additional code needed!
-        // Form submission will automatically POST to /api/contact
-        console.log('Form handling is automatic!');
+    // Global route change handler
+    onRouteChange: (newRoute, oldRoute) => {
+        // Analytics tracking
+        if (window.analytics) {
+            window.analytics.track('page_view', {
+                route: newRoute,
+                previous_route: oldRoute
+            });
+        }
     }
-};
+});
 ```
 
-### Variable Parameter Forms - 🆕 Revolutionary!
+## 📦 Bundle Size Comparison
 
-The most powerful feature is **variable parameter support** in action URLs. You can use simple template syntax to inject dynamic values:
+| Solution | Minified | Gzipped |
+|----------|----------|---------|
+| **ViewLogic Router** (Complete) | **51KB** | **17KB** |
+| Vue Router + Pinia + Vue I18n | 150KB+ | 45KB+ |
+| React Router + Redux + i18next | 200KB+ | 60KB+ |
+| Next.js (Runtime) | 300KB+ | 85KB+ |
 
-```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>
+*ViewLogic Router provides the functionality of 7+ libraries in a package smaller than most single-purpose libraries.*
 
-<!-- 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>
+## 🎯 Migration Guide
 
-<!-- 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>
-```
+### From Vue Router + Pinia
 
+**Before:**
 ```javascript
-// Component logic - parameters are resolved automatically
-export default {
-    name: 'UserProfile',
-    data() {
-        return {
-            userId: 123,    // {userId} will be replaced with this value
-            orderId: 456    // {orderId} will be replaced with this value
-        };
-    },
-    methods: {
-        handlePostSuccess(response) {
-            console.log('Post created successfully!', response);
-        },
-        orderUpdated(response) {
-            console.log('Order updated!', response);
-        }
-    }
-};
+// main.js - Multiple library setup
+import { createApp } from 'vue';
+import { createRouter, createWebHistory } from 'vue-router';
+import { createPinia } from 'pinia';
+import { createI18n } from 'vue-i18n';
+import App from './App.vue';
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes: [/* complex route config */]
+});
+
+const pinia = createPinia();
+const i18n = createI18n({/* complex i18n config */});
+
+const app = createApp(App);
+app.use(router).use(pinia).use(i18n);
+app.mount('#app');
 ```
 
-### How Parameter Resolution Works
+**After:**
+```javascript
+// index.html - Single setup
+import { ViewLogicRouter } from 'viewlogic';
 
-Parameters are resolved automatically from multiple sources in this order:
+const router = new ViewLogicRouter({
+    mode: 'history',
+    useI18n: true,
+    authEnabled: true
+});
+// Everything is auto-configured and ready to use!
+```
 
-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
+### State Management Migration
 
+**Before (Pinia):**
 ```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
-        };
+// stores/user.js
+import { defineStore } from 'pinia';
+
+export const useUserStore = defineStore('user', {
+    state: () => ({
+        currentUser: null,
+        preferences: {}
+    }),
+    getters: {
+        isLoggedIn: (state) => !!state.currentUser,
+        userName: (state) => state.currentUser?.name || 'Guest'
     },
-    computed: {
-        currentOrderId() {   // Available as {currentOrderId} in action URLs
-            return this.getParam('orderId') || this.defaultOrderId;
+    actions: {
+        setUser(userData) {
+            this.currentUser = userData;
+        },
+        updatePreferences(prefs) {
+            this.preferences = { ...this.preferences, ...prefs };
         }
-    },
-    mounted() {
-        // Route parameters also work: /user-profile?userId=789
-        // {userId} will use 789 from URL, or fall back to data() value of 123
     }
-};
-```
+});
 
-### 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>
+// In components
+import { useUserStore } from '@/stores/user';
+const userStore = useUserStore();
+userStore.setUser(userData);
 ```
+
+**After (ViewLogic):**
 ```javascript
-export default {
-    methods: {
-        subscriptionSuccess(response) { this.$toast('Success!', 'success'); },
-        subscriptionError(error) { this.$toast('Failed!', 'error'); }
+// In any component - no store files needed!
+this.$state.set('currentUser', userData);
+this.$state.update({ preferences: newPrefs });
+
+// Computed properties work naturally
+computed: {
+    isLoggedIn() {
+        return !!this.$state.get('currentUser');
+    },
+    userName() {
+        return this.$state.get('currentUser')?.name || 'Guest';
     }
-};
+}
 ```
 
-### 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>
-```
+## 🔧 Production Build
 
-### 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 -->
-```
+```bash
+# Development mode (zero build)
+npm run dev
 
-### 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>
-```
+# Production build with optimization
+npm run build
 
-### 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>
+# Preview production build
+npm run serve
 
-<!-- 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>
+# Build with custom config
+npm run build -- --config custom.config.js
 ```
 
-### 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
+### Production Optimizations
 
-## 🔗 Query-Based Parameter System: Revolutionary Simplicity
+ViewLogic Router automatically optimizes for production:
 
-ViewLogic Router's **Query-Based Parameter System** is a key feature that eliminates routing complexity:
+- **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
 
-**Philosophy**: **Everything is query-based** - no complex path parameters like `/users/:id`. Just simple, clean URLs: `/users?id=123`.
+## 🌟 Advanced Examples
 
-### 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
+### E-commerce Dashboard
 
-### 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
+// logic/dashboard.js
 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
-    }
-};
-```
+    dataURL: {
+        overview: '/api/dashboard/overview',
+        sales: '/api/sales/recent',
+        products: '/api/products/trending'
+    },
 
-### Why Query-Based is Revolutionary
-**Traditional Routers**: Complex path parameters (`/users/:id/posts/:postId`) require route configuration, parameter extraction logic, and mixed paradigms.
+    computed: {
+        totalRevenue() {
+            return this.sales?.reduce((sum, sale) => sum + sale.amount, 0) || 0;
+        },
+        cartItems() {
+            return this.$state.get('shoppingCart', []);
+        }
+    },
 
-**ViewLogic Router**: Simple query parameters (`/users?id=123&postId=456`) work universally with consistent `getParam()` access.
+    methods: {
+        async addToCart(product) {
+            const cart = this.$state.get('shoppingCart', []);
+            const existingItem = cart.find(item => item.id === product.id);
 
+            if (existingItem) {
+                existingItem.quantity += 1;
+            } else {
+                cart.push({ ...product, quantity: 1 });
+            }
 
-## 🛡️ Error Handling
+            this.$state.set('shoppingCart', cart);
 
-Built-in comprehensive error handling with automatic 404 detection, graceful component loading failures, and parameter validation with fallbacks.
+            // Sync with backend
+            await this.$api.post('/api/cart/sync', { items: cart });
+        },
 
-## 🚀 Production Deployment
+        async checkout() {
+            const items = this.$state.get('shoppingCart', []);
+            try {
+                const order = await this.$api.post('/api/orders', { items });
+                this.$state.set('shoppingCart', []);
+                this.$state.set('lastOrder', order);
+                this.navigateTo('order-confirmation', { orderId: order.id });
+            } catch (error) {
+                this.$toast?.error?.('Checkout failed. Please try again.');
+            }
+        }
+    }
+};
+```
 
-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/`)
+### Multi-tenant Application
 
-**CDN Usage:**
-```html
-<script src="https://cdn.jsdelivr.net/npm/viewlogic/dist/viewlogic-router.umd.js"></script>
-<script>
-    ViewLogicRouter({ environment: 'production' }).mount('#app');
-</script>
+```javascript
+// Handle different tenants with state management
+export default {
+    async mounted() {
+        const tenantId = this.$params.tenantId || this.$query.tenant;
+
+        if (tenantId !== this.$state.get('currentTenant')?.id) {
+            await this.switchTenant(tenantId);
+        }
+    },
+
+    methods: {
+        async switchTenant(tenantId) {
+            try {
+                const tenant = await this.$api.get('/api/tenants/{tenantId}', {
+                    params: { tenantId }
+                });
+
+                // Update global state
+                this.$state.update({
+                    currentTenant: tenant,
+                    userPermissions: tenant.permissions,
+                    theme: tenant.branding.theme
+                });
+
+                // Update language if tenant has preference
+                if (tenant.defaultLanguage) {
+                    await this.$i18n.setLanguage(tenant.defaultLanguage);
+                }
+
+                // Update API base URL for tenant
+                this.$api.setBaseURL(`/api/tenants/${tenantId}`);
+
+            } catch (error) {
+                this.navigateTo('tenant-not-found');
+            }
+        }
+    }
+};
 ```
 
 ## 🤝 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.*