An Overview of mpvue: A Vue.js‑Based Framework for WeChat Mini Programs

mpvue is a front‑end framework that enables developers to build WeChat Mini Programs using Vue.js, providing a complete Vue development experience and code reuse between H5 web applications and Mini Programs.

The project has been validated in multiple Meituan‑Dianping business projects and is now open‑sourced on GitHub: https://github.com/Meituan-Dianping/mpvue .

Key motivations for creating mpvue include rapid development, high code reuse, low cost, and improved development efficiency. Traditional Mini Program development faces challenges such as incomplete component mechanisms, limited multi‑platform code reuse, and a relatively high learning curve.

mpvue addresses these challenges by adopting Vue.js as the development language, offering a component system, lifecycle mapping, and event proxying that bridge Vue.js and Mini Program runtimes.

Evolution of mpvue

The framework evolved through three stages:

Stage 1: a view‑layer conversion tool that transformed H5 view code into Mini Program code, achieving limited reuse.

Stage 2: a refined component mechanism based on Vue component specifications, handling data sync, lifecycle linking, and namespace issues.

Stage 3: full support for the complete Vue.js syntax by integrating a custom Vue runtime for the Mini Program platform.

Design ideas

Vue.js and Mini Programs share a data‑driven view‑update model. mpvue maps Vue data changes to Mini Program pages, synchronizes lifecycles, and proxies events, as illustrated in the following figures.

Figure 1: Mini Program implementation principle

Figure 2: mpvue implementation principle

How to use mpvue

Install the Vue CLI globally, initialize a project from the mpvue template, install dependencies, and start the development server. The built output in the dist directory can be loaded into the Mini Program developer tools.

# Install vue-cli
$ npm install --global vue-cli
# Create project from template (internal repository)
$ vue init 'bitbucket:xxx.meituan.com:hfe/mpvue-quickstart' --clone my-project
# Install dependencies and start dev
$ cd my-project
$ npm install
$ npm run dev

mpvue supports two main code‑reuse scenarios:

H5 → Mini Program : replace the Mini Program‑specific Vue runtime and loader with the standard Vue.js equivalents, then adapt platform‑specific APIs.

Mini Program → H5 : use the same Vue source code, swapping the Mini Program runtime for the standard Vue runtime and adjusting API calls.

Current limitations are listed in Table 1 (e.g., slots, filters, and some advanced Vue features are not yet supported).

Table 1: mpvue unsupported syntax features

Best practices

Use vue-cli to scaffold projects and develop with Vue 2.x syntax.

Avoid unsupported Vue syntax (e.g., slots, filters).

Design fine‑grained data models to control updates and avoid performance issues.

Leverage component‑based development to maximize code reuse.

Table 2: Comparison of Mini Program frameworks (mpvue, WePY, native)

Conclusion: mpvue has been proven in large‑scale production at Meituan‑Dianping, continues to evolve with Vue.js releases, and aims to lower the barrier for Vue developers to adopt Mini Program development, offering a unified code base and improved development efficiency.