Add Vue examples and native UI refactoring

[andycall]

Summary

This PR introduces comprehensive Vue.js support for WebF with extensive examples and reorganizes native UI components:

• Vue Use Cases Application: Complete Vue 3 application with 80+ example pages demonstrating WebF features (animations, routing, DOM APIs, Cupertino components, CSS features, etc.)
• Native UI Restructuring: Moved Cupertino UI and Form plugins to native_uis/ directory for better organization
• Form Native Plugin: New Flutter form integration plugin with TypeScript bindings
• Vue Router Enhancements: Improved routing with hybrid navigation, better path matching, and comprehensive tests
• CLI Improvements: Enhanced code generation for Vue components with better peer dependency management
• Layout & Rendering Fixes: Fixed layout constraints for duplicated WebF elements and image prerendering
• React Use Cases Updates: Refactored routing demos and added WebF Router API examples

Key Changes

New Vue Use Cases (vue_usecases/)

• 80+ example pages covering:
  • Cupertino UI components (buttons, alerts, forms, pickers, etc.)
  • CSS features (flexbox, transforms, animations, filters)
  • DOM APIs (events, geometry, storage, MutationObserver)
  • Network & WebSocket examples
  • Routing demonstrations with vue-router integration
  • Canvas 2D, SVG, and image handling
  • Responsive design and typography showcases

Native UI Organization (native_uis/)

• Moved webf_cupertino_ui from webf/ to native_uis/webf_cupertino_ui
• New native_uis/form Flutter plugin for form handling with:
  • TypeScript type definitions (flutter_form.d.ts)
  • Dart FFI bindings
  • React and Vue integration support

Vue Router (packages/vue-router)

• Added hybrid router change handling for Flutter navigation integration
• Improved path matching with comprehensive test coverage
• Better route context management with composables
• Debug utilities and RouterLink component

CLI Updates (cli/)

• Enhanced Vue component generation with proper peer dependencies
• Updated templates for React and Vue with better TypeScript support
• New peer dependency detection and management
• Improved test coverage for generators

WebF Core Fixes

• Fixed layout constraints for duplicated WebF elements (webf/lib/src/css/positioned.dart)
• Added image prerendering and caching (webf/lib/src/html/img.dart)
• Improved render style handling and viewport calculations

Integration Tests

• Added Flutter-attached testing utilities
• New snapshot for Cupertino context menu preview width
• Enhanced test runtime with global helpers

Test Plan

• Vue use cases build and run successfully
• All Vue example pages render correctly
• Vue router navigation works with hybrid mode
• Form plugin integrates with both React and Vue
• CLI generates valid Vue components
• Existing React use cases continue to work
• Integration tests pass
• Layout fixes resolve duplicated element issues
• Image prerendering works correctly

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
use-case	Ready	Preview, Comment	Jan 2, 2026 2:22am

[coderabbitai]

Important

Review skipped

Too many files!

142 files out of 292 files are above the max files limit of 150.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}