Nuxt Vant Mobile is a mobile-first web application starter template built on the Nuxt 4 ecosystem, delivering a pre-configured Nuxt project with Vant UI components, server-side rendering, and internationalization out of the box.
What is nuxt-vant-mobile?
Nuxt Vant Mobile is a GitHub template for building mobile web apps with Nuxt 4 (with Nuxt 3 compatibility), created by the vue-zone organization. It takes a freshly generated repository or a local clone as input and outputs a production-ready Nuxt application with SSR, ESR, file-based routing, component auto-importing, and a layout system in app/layouts. The project is distributed under the MIT license and its source lives at https://github.com/vue-zone/nuxt-vant-mobile.
Key Features
- Nuxt 4 framework — Runs on Nuxt 4 with support for Nuxt 3, providing SSR, ESR, file-based routing, auto-importing of components and APIs, and access to the Nuxt module ecosystem.
- Vite dev experience — Uses Vite under the hood for instant Hot Module Replacement during development.
- UnoCSS styling — Integrates UnoCSS as an on-demand atomic CSS engine, with the ability to use icons from any icon set as pure CSS.
- Vant mobile UI — Pre-integrates Vant, a Vue UI library designed for mobile web apps, so common mobile components are ready to use.
- Internationalization (i18n) — Includes the Nuxt i18n module and a locales folder (./i18n/locales) for multi-language support.
- Pinia state management — Ships with Pinia and the Pinia Persistedstate plugin; a counter composable example is provided in app/composables/counter.ts.
- TypeScript — The template is written in TypeScript and supports auto-import of Composition API and custom composables.
- Zero-config Netlify deployment — Configured to deploy to Netlify directly, with a live preview at https://nuxt-vant-mobile.netlify.app.
Who should use nuxt-vant-mobile?
- Mobile app developers — who need a Nuxt starter with Vant components wired up, saving the time of configuring UI, state, and i18n themselves.
- Frontend teams — that want SSR or ESR for mobile web products and need a reliable base with ESLint (via Nuxt ESLint) and a layout system.
- Developers learning Nuxt 4 — who want a working example combining Nuxt, UnoCSS, Pinia, i18n, and Vant to study or extend.
What can you do with nuxt-vant-mobile?
- Build a mobile-first content site: combine SSR with Vant's components and UnoCSS's atomic classes to produce server-rendered pages.
- Set up a multilingual app: edit the locale files inside i18n/locales and switch languages using the Nuxt i18n module.
- Deploy an app to production quickly: run pnpm build and serve the .output folder, or push the repo to Netlify for managed deployment.
How does nuxt-vant-mobile work?
After creating a repo from the GitHub template or cloning with npx tiged, install dependencies with pnpm (required, available via npm install -g pnpm). Run pnpm dev to start the development server at http://localhost:3000, or pnpm build to generate a production bundle in the .output directory. The template requires Node version 22.22.0 or higher.
FAQ
Does nuxt-vant-mobile support Nuxt 3?
Yes, the repository topics list nuxt3 and nuxt3-starter alongside nuxt4, and the README states it is based on the Nuxt 4 ecosystem, implying compatibility with both major versions.
Is nuxt-vant-mobile free to use?
Yes, it is released under the MIT License, so you can freely use, modify, and distribute it for personal or commercial projects.
What UI library does nuxt-vant-mobile use?
It uses Vant, a Vue component library tailored for mobile web apps, together with UnoCSS for utility CSS and icon support. No other UI framework is pre-installed.
How do I deploy nuxt-vant-mobile?
The simplest path is to connect your repository to Netlify; the template requires no extra configuration. Alternatively, run pnpm build and host the resulting .output directory on any static or Node server.
Where can I report issues?
Open an issue on the GitHub repository at https://github.com/vue-zone/nuxt-vant-mobile/issues. The README also links to a WeChat community group for discussion.
