Guide · Open source
How to use mpvue: install and build mini programs with Vue.js
Updated · written with AI from the project's own documentation and checked against our catalogue data
mpvue is an open-source front-end framework from Meituan-Dianping that lets you write mini programs with Vue.js. It is forked from Vue 2.4.1, with its runtime and compiler changed so the code runs inside mini program environments. This guide covers what it supports, how to install it with npm, the main features and whether it suits a project you are starting now.
mpvueMeituan-Dianping/mpvue · ★ 20.2k · MIT Install options & downloads Quick start
- 1Confirm prerequisites. Install Node.js and npm on your machine. mpvue is installed through npm.
- 2Install the package. Run npm install mpvue in your project folder to add the framework.
- 3Start from the quickstart. Follow the five-minute quickstart on the mpvue site, or use the mpvue-quickstart project template, to create a working project.
- 4Pick the target platform. Choose WeChat, Baidu, Toutiao or Alipay as the mini program platform your project builds for.
- 5Build with webpack. Use the webpack-based build and hot reload during development, with mpvue-loader as the webpack loader.
- 6Add state and dependencies. Add Vuex for shared state and npm packages where your project needs them.
What mpvue is and which platforms it supports
mpvue is a framework for developing mini programs with Vue.js. According to the README, it currently supports WeChat mini programs, Baidu smart mini programs, Toutiao mini programs and Alipay mini programs.
The project keeps the Vue.js runtime capabilities and adds mini program platform support. The name comes from mp (mini program) plus Vue.js, meaning Vue.js in mini program.
- WeChat mini programs
- Baidu smart mini programs
- Toutiao mini programs
- Alipay mini programs
Install mpvue with npm
You need Node.js and npm installed. Then install the mpvue package from npm with the command below.
The README also points to the mpvue-quickstart project template and the vue-cli command line tool for starting a project quickly. Check the quickstart guide on the mpvue site for the steps that follow.
- Prerequisites: Node.js and npm
npm install mpvueKnow the main features
mpvue brings Vue.js development to mini programs. The README lists these capabilities on top of the mini program platform:
- Component-based development for better code reuse
- Full Vue.js development experience
- Vuex for state management in larger apps
- webpack build with custom build strategies and hot reload during development
- Support for npm external dependencies
- Project setup with the vue-cli command line tool
- Conversion of H5 code into mini program target code
Use the supporting tools in the mpvue ecosystem
Beyond the SDK, the README lists companion tools. mpvue-loader provides a webpack loader. mpvue-webpack-target is a webpack build target. postcss-mpvue-wxss and px2rpx-loader handle style conversion. mpvue-simple helps create Page and Component level mini program pages quickly.
- mpvue-loader: webpack loader
- mpvue-webpack-target: webpack build target
- postcss-mpvue-wxss: style code conversion
- px2rpx-loader: style conversion plugin
- mpvue-simple: helper for Page and Component level pages
Check the maintenance status before you start
The README describes mpvue 2.0 as the version that officially added Baidu, Toutiao and Alipay support, and says 1.x projects continue on the 1.4.x line. The README's latest release is 1.4.4, and the last push was in March 2022, so ongoing maintenance is unclear.
mpvue is based on Vue 2.4.1, so it does not provide Vue 3 features. It is also a third-party layer on top of the official WeChat framework.
- Good fit: you already know Vue.js and want WeChat mini programs
- Good fit: you want to reuse existing Vue.js components
- Good fit: you need webpack builds, Vuex or npm packages in mini programs
- Poor fit: a brand-new project where long-term maintenance matters
- Poor fit: you need Vue 3 features or the official WeChat framework only
What people use it for
- Building a WeChat mini program using Vue.js components you already have
- Creating a mini program page with mpvue-simple for Page or Component level screens
- Sharing Vue.js components between a web app and a mini program
- Structuring a larger mini program with Vuex state management
Frequently asked questions
Is mpvue free to use?
mpvue is released under the MIT licence, according to the repository. The MIT licence generally permits use, modification and distribution, so check the licence text for your own project needs.
What do I need to install mpvue?
The README lists Node.js and npm as prerequisites. Install the package with npm install mpvue.
Does mpvue support Vue 3?
No. mpvue is forked from Vue 2.4.1, so it is not based on Vue 3 and does not provide Vue 3 features.
Which mini program platforms does mpvue support?
According to the README, mpvue supports WeChat, Baidu smart, Toutiao and Alipay mini programs. Version 2.0 added the Baidu, Toutiao and Alipay support.
Is mpvue still maintained?
The README's latest release is 1.4.4 and the last push was in March 2022, so ongoing maintenance is unclear. Check the repository activity before you start a new project.
How does mpvue compare to Taro, uni-app, Remax and wepy?
Taro, uni-app, Remax and wepy are comparable projects for building mini programs. This guide does not compare their features, so review each project's documentation and activity against your requirements.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
mpvue suits developers who already know Vue 2 and want WeChat mini programs, or teams reusing existing Vue.js components. Because its latest release and last push are dated and maintenance is unclear, teams starting a new project today should compare it with Taro, uni-app, Remax or wepy first.
Install options & downloads