Rust WebUI-Vue Desktop Application

A production-ready desktop application framework combining Rust backend with Vue.js 3 frontend via WebUI.

Quick Start

# Clone and install
git clone https://github.com/your-org/starter-rust-webuivue-rsbuild.git
cd starter-rust-webuivue-rsbuild
bun install --cwd frontend

# Build and run
./run.sh

Table of Contents

• Features
• Technology Stack
• Project Structure
• Getting Started
• Build Commands
• Testing
• Documentation
• Architecture
• License

Features

• Native Performance - Rust backend with compiled performance
• Modern UI - Vue.js 3 with Composition API
• Plugin System - Extensible core and plugin architecture
• Zero Config - SQLite bundled, no setup required
• Type Safe - Full TypeScript and Rust type safety with auto-generated types
• Hot Reload - Frontend development with fast refresh
• Cross Platform - Windows, macOS, Linux support
• Enhanced Logging - Comprehensive error logging with panic hooks
• Typed API Layer - Auto-generated TypeScript types from Rust definitions

Technology Stack

Layer	Technology
Backend	Rust, WebUI-rs, SQLite, serde, chrono
Frontend	Vue.js 3, TypeScript, Rsbuild, Bun
Communication	WebUI Bridge (JSON over WebSocket)
Build	Cargo workspace, Bun, Rsbuild
Linting	Biome (frontend), Clippy (backend)
Testing	cargo test (backend), Bun test (frontend)

Project Structure

starter-rust-webuivue-rsbuild/
├── Cargo.toml                    # Rust workspace configuration
├── app.config.toml               # Application configuration
├── run.sh                        # Main build and run script
├── test.sh                       # Test runner script
├── build-frontend.js             # Frontend build script
├── crates/                       # Rust workspace crates
│   ├── app/                      # Main application entry point
│   │   ├── src/
│   │   │   ├── main.rs           # Application entry
│   │   │   └── bin/
│   │   │       └── generate-types.rs  # Type generator
│   │   └── Cargo.toml
│   ├── core/                     # Core infrastructure
│   │   ├── src/
│   │   │   ├── app_context.rs    # Explicit dependency context
│   │   │   ├── config.rs         # Configuration system
│   │   │   ├── database.rs       # SQLite database layer
│   │   │   ├── di.rs             # Dependency injection
│   │   │   ├── enhanced_logging.rs  # Enhanced logging
│   │   │   ├── event_bus.rs      # Event bus system
│   │   │   └── logging.rs        # Basic logging
│   │   └── Cargo.toml
│   ├── error-types/              # Error type definitions
│   ├── plugin-api/               # Plugin API definitions
│   ├── plugins/                  # Plugin implementations
│   │   └── system_info/          # System information plugin
│   ├── features/                 # Feature modules
│   │   ├── src/
│   │   │   ├── file_manager/     # File operations
│   │   │   ├── settings/         # Settings management
│   │   │   └── ...               # Other features
│   │   └── Cargo.toml
│   └── shared-types/             # Shared DTOs
├── frontend/                     # Vue.js application
│   ├── src/
│   │   ├── components/           # Vue components
│   │   ├── composables/          # Reusable composables
│   │   ├── features/             # Feature modules
│   │   ├── infrastructure/       # Core services
│   │   │   ├── backend-api.ts    # Typed API client
│   │   │   ├── error-logger.ts   # Error logging
│   │   │   ├── webui-bridge.ts   # WebUI communication
│   │   │   └── ...
│   │   ├── types/
│   │   │   └── generated.ts      # Auto-generated types
│   │   └── main.ts               # Application entry
│   ├── tests/                    # Frontend tests
│   ├── biome.json                # Biome configuration
│   └── package.json
├── docs/                         # Documentation
└── static/                       # Built assets

Getting Started

Prerequisites

• Rust 1.70 or later
• Bun (JavaScript runtime)
• Git

Installation

# Clone repository
git clone https://github.com/your-org/starter-rust-webuivue-rsbuild.git
cd starter-rust-webuivue-rsbuild

# Install frontend dependencies
bun install --cwd frontend

# Build and run
./run.sh

Configuration

Edit app.config.toml to customize:

[app]
name = "Rust WebUI SQLite Demo"
version = "1.0.0"

[database]
path = "app.db"
create_sample_data = true

[logging]
level = "info"
file = "application.log"

[window]
title = "Rust WebUI Application"
width = 1200
height = 800

Build Commands

Development

# Full build and run
./run.sh

# Build only (no run)
./run.sh --build

# Run only (requires prior build)
./run.sh --run

# Clean and rebuild
./run.sh --rebuild

Testing

# Run all tests (backend + frontend)
./test.sh

# Backend tests only
cargo test --workspace

# Frontend tests only
cd frontend && bun test

# Tests with coverage
./test.sh --coverage

Type Generation

# Generate TypeScript types from Rust definitions
cargo run --bin generate-types -- frontend/src/types

Linting

# Backend
cargo clippy --workspace

# Frontend
cd frontend
bun run lint          # Check for issues
bun run lint:fix      # Auto-fix issues
bun run format:check  # Check formatting
bun run format:fix    # Auto-format

Testing

Backend Tests

# All workspace tests
cargo test --workspace

# Specific crate
cargo test -p rustwebui-core

# With output
cargo test -- --nocapture

Frontend Tests

cd frontend

# Run all tests
bun test

# Watch mode
bun test --watch

# With coverage
bun test --coverage

Documentation

Core Documentation

Document	Description
Getting Started	Installation and quick start
Project Overview	Features and concepts
Build and Run	Build system guide

Architecture

Document	Description
Architecture Overview	System design
Plugin Architecture	Plugin system
AppContext Pattern	Dependency injection

Backend

Document	Description
Core Services	DI, Event Bus, Logging
Error Handling	Error patterns
Enhanced Logging	Comprehensive logging

Frontend

Document	Description
Biome Setup	Linter and formatter
Backend API	Typed API layer
Error Logger	Frontend error handling

Testing and Quality

Document	Description
Testing Guide	Unit and integration tests
Architectural Assessment	Design review
Contributing	Contribution guidelines

Reference

Document	Description
FAQ	Frequently asked questions
Changelog	Version history
Clean Terminal Logs	Logging configuration

Architecture

+--------------------------------------------------+
|              Frontend (Vue.js)                    |
|  Components | Stores | Composables | Typed API   |
+--------------------------------------------------+
                        |
                        | Typed JSON-RPC
                        v
+--------------------------------------------------+
|              Backend (Rust)                       |
|  WebUI Handlers | Feature Services | Core        |
|  (thin layer)   | (business logic) | (DI, DB)    |
+--------------------------------------------------+

Key Architectural Patterns

1. Explicit Dependencies - AppContext for dependency passing
2. Type Safety - Auto-generated TypeScript types from Rust
3. Structured Errors - ApiResponse pattern for all backend calls
4. Event Bus - Pub-sub for cross-module communication
5. Plugin Architecture - Extensible core with plugin system

License

MIT License - see LICENSE file for details.

External Resources

• Rust Documentation
• Vue.js Documentation
• WebUI Documentation
• Rsbuild Documentation
• Biome Documentation
• Bun Documentation