A maintained Vue 2 bridge for mini programs

One Vue codebase,
four mini programs.

vue-mini-bridge carries the mpvue lineage forward: write single-file components in Vue 2, compile them to native mini-program templates, and run them on WeChat, Alipay, Baidu, and ByteDance from one codebase.

npm install vue-mini-bridge v2.4.1 MIT licensed

Use it

Components stay ordinary Vue. The template compiler turns the <template> block into native markup per target.

Installshell

npm install vue-mini-bridge vue-mini-bridge-template-compiler

A componentcounter.vue

<template>
  <view class="counter">
    <text>{{ count }}</text>
    <button @click="add">Add one</button>
  </view>
</template>

<script>
export default {
  data: () => ({ count: 0 }),
  methods: {
    add () { this.count += 1 }
  }
}
</script>

Compile itbuild.js

const { compile, compileToMPML } = require('vue-mini-bridge-template-compiler')

const compiled = compile(template, {})
const { code } = compileToMPML(compiled, { name: 'demo' }, { platform: 'wx' })
// code is a <template> block ready for the page WXML

Platforms

One compiler flag picks the dialect. The emitted primitives — templates, data binding, setData — are the stable core every vendor still supports.

Platform	Target	Dialect	Status
WeChat	`wx`	`wx:if` `wx:for` `bindtap`	Supported — base library 3.x; template + setData path works in WebView and Skyline renderers.
Alipay	`my`	`a:if` `a:for` `onTap`	Supported — AXML directives stable; verify against the current Mini Program Studio.
Baidu	`swan`	`s-if` `s-for` `bindtap`	Supported — Swan directives stable; verify against current Baidu developer tools.
ByteDance	`tt`	`tt:if` `tt:for` `bindtap`	Supported — TTML directives stable; verify against current Douyin developer tools.

Playground

Real compiler output. Pick an example and a target to see exactly what ships to each platform.

Vue templateinput

Loading…

Compiled templatewx

Compiled with the repository template compiler.

Directives

Vue directives map to each vendor's native spelling. These are the compiler's actual conversions.

Vue templateinput

Loading…

Pipeline

Build time compiles templates; run time keeps the native view in sync through diffed setData calls.

Solid boxes run at build time; dashed boxes run on device. The runtime never touches the DOM — it diffs state and calls setData.

Vue 2 components, compiled to the mini-program vendors you ship to.