mobx-vue

library2.2.0jsnpmunverified

mobx-vue provides Vue 2 bindings for MobX, a state management library that simplifies working with reactive data. It enables Vue components to automatically react to MobX-managed state changes, drawing inspiration from `mobx-react`. The current stable version, 2.2.0, ensures compatibility with a wide range of MobX versions (2 through 6) after a temporary breaking change in v2.1.0 that restricted support to MobX 6. The library's release cadence appears to be irregular, marked by significant version compatibility adjustments. A key differentiator is its unopinionated approach, allowing for a more framework-agnostic data layer, which can ease migration between different view libraries. It is explicitly designed for Vue 2 applications; for Vue 3 support, users should look to `mobx-vue-lite`. It supports both Vue's Options API and, with a strong recommendation, class-based components using `vue-class-component` and decorators.

web-framework

npm install mobx-vue

github ↗package ↗

INSTALL

IMPORT

SIG · MOBX-VUE

mobx-vue

web-frameworkjavascriptv2.2.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Observer

✓ import { Observer } from 'mobx-vue'

✗ import Observer from 'mobx-vue'

Used as a decorator (`@Observer`) for class-based Vue components to make them reactive to MobX observables.

observer

✓ import { observer } from 'mobx-vue'

✗ import { Observer } from 'mobx-vue'

Used as a function (`observer(...)`) to wrap Vue components defined with the Options API, making them reactive to MobX observables.

observable, action, computed

✓ import { observable, action, computed } from 'mobx'

✗ import { observable, action, computed } from 'mobx-vue'

These core MobX primitives are imported directly from the `mobx` package, not `mobx-vue`. `mobx-vue` provides the bindings to integrate MobX's reactivity into Vue components.

This quickstart demonstrates creating a reactive MobX ViewModel using decorators and integrating it into a Vue 2 class component using the `@Observer` decorator from `mobx-vue`.

import { action, computed, observable } from "mobx"; import Vue from "vue"; import Component from "vue-class-component"; import { Observer } from "mobx-vue"; // Mock HTTP client for demonstration const http = { get: (url) => { console.log(`Fetching from ${url}`); return new Promise(resolve => { setTimeout(() => { if (url === '/users') { resolve([{ name: 'Alice' }, { name: 'Bob' }]); } else { resolve([]); } }, 500); }); } }; // ViewModel (MobX Store) class ViewModel { @observable age = 10; @observable users = []; @computed get computedAge() { return this.age + 1; } @action.bound setAge() { this.age++; } @action.bound async fetchUsers() { this.users = await http.get('/users'); } } // Vue Component @Observer @Component export default class App extends Vue { state = new ViewModel(); // Instantiate your MobX ViewModel mounted() { this.state.fetchUsers(); } } // To render this in a typical Vue app: // new Vue({ // render: h => h(App) // }).$mount('#app')

Debug

Known issues

breakingVersion 2.1.0 of `mobx-vue` introduced a breaking change by dropping support for MobX versions 2, 3, 4, and 5, only supporting MobX v6. This change could cause runtime errors if you upgraded to v2.1.0 without also upgrading MobX to v6.

fix

Upgrade your `mobx` package to version 6.x.x, or if you need compatibility with older MobX versions, ensure you are using `mobx-vue` v2.2.0 or earlier than v2.1.0.

affects: 2.1.0

gotchaWhile `mobx-vue` version 2.2.0 re-establishes compatibility with MobX versions 2 through 6, developers should be aware of the specific MobX version they are using. MobX 6 introduced significant changes, including an opt-in decorator usage and default Proxy-based reactivity, which might require specific Babel/TypeScript configuration (e.g., `useDefineForClassFields: true` for TypeScript).

fix

Consult the MobX 6 migration guide if upgrading from older MobX versions to understand necessary `tsconfig.json` or `.babelrc` adjustments for decorators and Proxy support.

affects: >=2.2.0

gotcha`mobx-vue` is explicitly designed for Vue 2 applications. Attempting to use it with Vue 3 will lead to incompatibility issues due to fundamental changes in Vue's reactivity system and component lifecycle.

fix

For Vue 3 projects, use `mobx-vue-lite`, which is the dedicated MobX binding library for Vue 3 based on the Composition API.

affects: <=2.2.0

Errors

Common errors & fixes

TypeError: 'this' is undefined in decorator factory

Incorrect TypeScript or Babel configuration for decorators, especially with MobX 6 and class fields. This usually means the `experimentalDecorators` and `emitDecoratorMetadata` flags are not correctly set in `tsconfig.json`, or the Babel plugin for class properties is not configured correctly (`loose: false`).

fix

For TypeScript, ensure `tsconfig.json` includes `"experimentalDecorators": true`, `"emitDecoratorMetadata": true`, and `"useDefineForClassFields": true` under `compilerOptions`. For Babel, ensure `@babel/plugin-proposal-class-properties` is configured with `"loose": false` if using Babel < 7.13, or rely on `setPublicClassFields: false` assumption for Babel >= 7.13.

Error: [mobx] An action was expected, but a pure function was used. Actions can be specified by marking functions with `@action`...

Attempting to modify observable state outside of a MobX action when `enforceActions` is enabled (which is the default in MobX 6 strict mode).

fix

Wrap state modifications within MobX `@action` annotated methods or `action()` utility functions. For asynchronous operations, use `action.bound` or `flow`.

Error: [mobx] A property was tried to be made observable, but the property 'x' already exists on the object. Use `extendObservable` if you intended to update an existing observable.

This typically occurs in older MobX versions (pre-MobX 6) or specific scenarios when trying to redefine an observable property on an existing object. In MobX 6, if decorators are not configured correctly, MobX might not correctly initialize observables.

fix

Ensure that properties decorated with `@observable` are initialized correctly within the class definition or constructor. If working with older MobX versions, use `extendObservable` for adding new observable properties to an already observable object. For MobX 6, verify decorator configuration.

Upgrade

Version history

2.2.0latest on npm

Audit

Dependencies

mobxrequiredCore state management library. Supports MobX ^2.0.0 through ^6.0.0.

vuerequiredCore UI framework. Supports Vue ^2.0.0.

vue-class-componentoptionalRecommended for using class-style components and decorators with Vue 2, which is the preferred usage pattern for mobx-vue. Although not strictly a runtime dependency of mobx-vue itself, it's integral to the recommended usage.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/mobxjs/mobx-vue ↗

packagehttps://www.npmjs.com/package/mobx-vue ↗