vue3-vant-mobile is an open-source mobile web app starter template built on the Vue 3 ecosystem, combining Vant UI, Vite 8, Pinia, and UnoCSS into a pre-configured foundation for H5 development.
What is vue3-vant-mobile?
A mobile web application template for the Vue 3 ecosystem, it scaffolds a complete H5 app with routing, state management, internationalization, and PWA support. The template takes a GitHub repository as input and produces a deployable mobile web app, running on Vue 3, Vite, and pnpm. It is maintained by the vue-zone community on GitHub and requires Node 22.22.0+.
Key Features
- Vue 3 + Vite 8 — Uses the Composition API with
<script setup>syntax, bundled by Vite 8, and managed with pnpm for fast startup and optimized builds. - Vant UI — Pre-installs Vant, a Vue UI library for mobile web apps, plus vant-touch-emulator for desktop touch simulation and vant-use composition APIs.
- UnoCSS — Integrated instant on-demand atomic CSS engine with VS Code extension support for real-time class suggestions.
- Pinia with persistence — State management via Pinia, pre-configured with pinia-plugin-persistedstate for automatic store persistence and rehydration.
- File-based routing — Routes are generated from the file structure in src/router, so adding a page is just creating a component.
- PWA support — vite-plugin-pwa is bundled for installable, offline-capable web applications with auto-generated service workers.
- i18n ready — Vue I18n with unplugin-vue-i18n and a src/locales folder, plus the i18n Ally VS Code extension for inline translations.
- Mock server and vConsole — vite-plugin-mock-dev-server enables API mocking during development, and vite-plugin-vconsole adds a mobile console for debugging.
Who is it for?
Mobile web developers who want a ready-to-use Vue 3 and Vant stack without configuring build tools manually. Teams building H5 pages, WeChat H5 apps, or PWA sites that need i18n, persistence, and offline support out of the box. Indie developers who want to scaffold a mobile app quickly and deploy it to Netlify with zero setup.
What can you do with it?
H5 developers: scaffold a new mobile web app with routing, state management, i18n, and PWA from a single template. WeChat H5 teams: use the mobile adaptation units and vConsole debugging to build and test pages inside the WeChat browser. Prototypers: create a production-ready mobile site on Netlify in minutes using the GitHub template and zero-config deployment.
How does it work?
Create a new repository from the GitHub template, or clone it locally using pnpm dlx tiged. Then run pnpm install and pnpm dev to start the dev server at localhost:3000. Build a production bundle with pnpm build, and deploy the dist folder by connecting the repository to Netlify.
FAQ
What Node version does vue3-vant-mobile require?
Node 22.22.0 or newer is required to run the pnpm scripts in this template.
Which UI library is included?
Vant is pre-installed, along with its touch emulator for desktop testing and the vant-use composition API collection.
Can the template be deployed to Netlify?
Yes, the project includes zero-config Netlify deployment — just connect the repository, and the build runs automatically.
Is the template free?
Yes, it is open source under the MIT License, so it can be used freely in personal and commercial projects.
