Mobx Vue Save

🐉 Vue bindings for MobX

Project README


Build Status npm version coverage npm downloads

Vue2 bindings for MobX, inspired by mobx-react. Looking for Vue3 support? Please look here mobx-vue-lite


Support Table

package mobx v6 mobx v2/v3/v4/v5 vue2 vue3
mobx-vue >= v2.1.0 * (exclude v2.1.0) * -
mobx-vue-lite * - - *

* means all and - means none


npm i mobx-vue -S


yarn add mobx-vue

Why mobx-vue

MobX is an unopinionated, scalable state management, which can make our programming more intuitive.

Unlike the other vue-rx-inspired libraries which based on the plugin mechanism of vue, mobx-vue will be the simplest you ever meet. What you all need is to bind your state in component definition and observe it just like mobx-react does, then your component will react to your state changes automatically which managed by mobx.

And, the most important is that you can build a view-library-free application, if you wanna migrate to another view library(React/Angular) someday, rewrite the template and switch to the relevant mobx bindings(mobx-react,mobx-angular,mobx-angularjs) is all you have to do.



We highly recommend using the bindings with vue-class-component decorator, and define the Store/ViewModel independently.

import { action, computed, observable } from "mobx";
export default class ViewModel {
    @observable age = 10;
    @observable users = [];

    @computed get computedAge() {
        return this.age + 1;

    @action.bound setAge() {
    @action.bound async fetchUsers() {
    	this.users = await http.get('/users')
        <p v-text="state.age"></p>
        <p v-text="state.computedAge"></p>
        <p v-for="user in state.users" :key="">{{}}</p>
        <button @click="state.setAge"></button>

<script lang="ts">
    import Vue from "vue";
    import Component from "vue-class-component";
    import { Observer } from "mobx-vue";
    import ViewModel from "./ViewModel";

    export default class App extends Vue {
        state = new ViewModel()
        mounted() { 

Or used with the traditional way:

<script lang="ts">
    import { observer } from "mobx-vue";
    import ViewModel from "./ViewModel";

    export default observer({
        data() {
            return { state: new ViewModel() }
        mounted() {

All you need is to bind your state to component and observe it. No more reactive data definitions in component.

Tips: If you're tired of instantiating instance manually every time, you might wanna try the mmlpx library which leveraged a dependency injection system.


  • observer((VueComponent | options): ExtendedVueComponent
Open Source Agenda is not affiliated with "Mobx Vue" Project. README Source: mobxjs/mobx-vue
Open Issues
Last Commit
1 year ago

Open Source Agenda Badge

Open Source Agenda Rating