Vue H5 Template is a production-ready Vue 3 project scaffold for mobile web applications.
The template addresses the complexity of building real-world mobile H5 projects by providing a complete, opinionated setup that handles common concerns: type-safe API requests with OpenAPI schema generation, server state management via TanStack Query, client state via Pinia, streaming AI chat with cancellation support, PWA capabilities, and responsive design tokens. It bundles Vite, TypeScript, Vue Router, and a choice of UI frameworks (Vant, NutUI, or Varlet) selected at build time rather than bundled together. The project includes a working e-commerce example with product search, cart management, and a project delivery tracker supporting full CRUD operations against both mock and real backends.
Developers should choose this template if building a mobile-first Vue 3 application where type safety, API contract generation, and production-grade tooling matter. It suits projects that need PWA support, multi-language support (Chinese, English, Japanese), or streaming AI chat integration. The template is not a component library playground but a working application foundation with meaningful test coverage and a constrained design system for typography, spacing, color, and motion tokens. It includes production image optimization via Sharp and SVGO, SVG sprite automation with type generation, and a responsive layout that adapts mobile bottom navigation to a compact top bar on desktop.
The project maintains active development with comprehensive tooling: ESLint, Prettier, Stylelint, Husky, and lint-staged enforce code quality; Vitest and Vue Test Utils provide unit testing with documented coverage; Playwright handles end-to-end testing in CI separately from local checks; GitHub Actions and Release Please automate releases. The codebase includes explicit directory boundaries documented in AGENTS.md to guide AI-assisted development. Mock server support is enabled by default in development, allowing full feature testing without a backend, and the template provides example pages demonstrating request handling, error scenarios, and the AI chat interface.
