Integration with SolidJS

Solid integration APIs — withViewModel, withPropsViewModel, useCreateViewModel, useViewModel, ViewModelsProvider, OnlyViewModel — live in the mobx-view-model-solid package.

Keep importing view-model classes, stores, and global configuration from mobx-view-model:

import { ViewModelBase, ViewModelStoreBase, viewModelsConfig } from "mobx-view-model";
import { withViewModel, ViewModelProps, enableObservableTracking } from "mobx-view-model-solid";

MobX ↔ Solid reactivity is powered by mobx-solid. After enableObservableTracking(), you read MobX observables directly in JSX — no observer wrappers.

Integration consists of 2–4 steps.

1. Enable MobX tracking (required once)

Call once at the app entry point, before any MobX reads inside Solid computations or JSX:

import { enableObservableTracking } from "mobx-view-model-solid";
import { render } from "solid-js/web";

enableObservableTracking();

render(() => <App />, document.getElementById("app")!);

This call is required: hooks and HOCs do not enable tracking automatically. Without it, MobX observable reads in JSX will not trigger Solid updates.

enableObservableTracking and obs are re-exported from mobx-view-model-solid for convenience. See mobx-solid docs.

2. Connect ViewModel with View

Your ViewModel should be connected to a Solid view. You can use:

• withViewModel() HOC — recommended
• withPropsViewModel() HOC — same, but all component props become payload
• useCreateViewModel() hook — create a VM inside a component

3. Render in the Solid tree

use withViewModel() HOC

import { ViewModelBase } from "mobx-view-model";
import { ViewModelProps, withViewModel } from "mobx-view-model-solid";

class YourComponentVM extends ViewModelBase {}

export interface YourComponentProps extends ViewModelProps<YourComponentVM> {
  yourProp?: string;
}

const YourComponent = withViewModel(
  YourComponentVM,
  (props: YourComponentProps) => {
    return <div>{props.model.id}</div>;
  },
);

const YourApp = () => {
  return <YourComponent />;
};

use useCreateViewModel() hook

import { ViewModelBase } from "mobx-view-model";
import { useCreateViewModel } from "mobx-view-model-solid";

class YourComponentVM extends ViewModelBase {}

const YourComponent = () => {
  const model = useCreateViewModel(YourComponentVM);

  return <div>{model.id}</div>;
};

const YourApp = () => {
  return <YourComponent />;
};

Reading observables

Solid component bodies run once. Read MobX state inside JSX (or Solid computations), not as a one-shot snapshot in the body — see Reading Observables.

4. [Optional] Use ViewModelStore

1. Create an instance of ViewModelStore
2. Wrap the app in ViewModelsProvider

import { ViewModelStoreBase } from "mobx-view-model";
import { ViewModelsProvider } from "mobx-view-model-solid";

const vmStore = new ViewModelStoreBase();

const YourApp = () => {
  return (
    <ViewModelsProvider value={vmStore}>
      ...
    </ViewModelsProvider>
  );
};

With a store you can use useViewModel() with a lookup argument.

isMounted

Mounting is started from useCreateViewModel. withViewModel waits until isMounted before rendering the view (or shows fallback).

Do not call mount() / unmount() manually

These are already called by ViewModelStore or useCreateViewModel.