# mobx-view-model

> ⚡ Clean MVVM for React / Solid + MobX ⚡

## Table of Contents

### Introduction 👋

- [Overview](/mobx-view-model/introduction/overview.md)
- [Getting started](/mobx-view-model/introduction/getting-started.md)
- [MobX decorators](/mobx-view-model/introduction/decorators.md)
- [Simple usage](/mobx-view-model/introduction/usage/simple.md)
- [Playground](/mobx-view-model/introduction/playground.md)

#### Usage

- [Simple usage](/introduction/usage/simple.md)
- [With base implementation](/introduction/usage/with-base-implementation.md)
- [Usage with View Model Store](/introduction/usage/with-view-model-store.md)
- [Detailed configuration](/introduction/usage/detailed-configuration.md)

### Core API ⚙️

- [View Models Overview](/mobx-view-model/api/view-models/overview.md)
- [View Model Store Overview](/mobx-view-model/api/view-model-store/overview.md)
- [View Model Lookup](/mobx-view-model/api/other/view-model-lookup.md)

#### View Models

- [View Models Overview](/api/view-models/overview.md)
- [View Model interface](/api/view-models/interface.md)
- [View Model base implementation](/api/view-models/base-implementation.md)
- [`ViewModelSimple`](/api/view-models/view-model-simple.md)
- [`ViewModelsConfig` configuration object](/api/view-models/view-models-config.md)

#### View Model Store

- [View Model Store Overview](/api/view-model-store/overview.md)
- [View Model Store interface](/api/view-model-store/interface.md)
- [View Model Store base implementation](/api/view-model-store/base-implementation.md)

#### Other

- [View Model Lookup](/api/other/view-model-lookup.md)

### React <span class="vp-sidebar-react-mark"><svg class="vp-sidebar-react-icon" xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348" aria-hidden="true"><circle cx="0" cy="0" r="2.05" fill="#61dafb"/><g stroke="#61dafb" stroke-width="1" fill="none"><ellipse rx="11" ry="4.2"/><ellipse rx="11" ry="4.2" transform="rotate(60)"/><ellipse rx="11" ry="4.2" transform="rotate(120)"/></g></svg></span>

- [React integration guide](/mobx-view-model/react/integration.md)
- [Server-Side Rendering (Next.js)](/mobx-view-model/react/ssr.md)
- [`withViewModel` HOC](/mobx-view-model/react/api/with-view-model.md)
- [Using all props as payload for your `ViewModel`](/mobx-view-model/recipes/all-props-as-payload.md)

#### API

- [`withViewModel` HOC](/react/api/with-view-model.md)
- [`withPropsViewModel` HOC](/react/api/with-props-view-model.md)
- [`ViewModelsProvider` Component](/react/api/view-models-provider.md)
- [`useViewModel` hook](/react/api/use-view-model.md)
- [`useCreateViewModel` hook](/react/api/use-create-view-model.md)
- [`<OnlyViewModel />` Component](/react/api/only-view-model.md)

#### Recipes 📜

- [Using all props as payload for your `ViewModel`](/recipes/all-props-as-payload.md)
- [Connect other components to `VMComponent`](/recipes/connect-components-to-vm-component.md)
- [Use generic ViewModel types in React components](/recipes/generic-view-models-in-react.md)
- [Wrap in `observer()` all view components](/recipes/observer-wrap-all-view-components.md)
- [Wrap view components in custom HOC](/recipes/wrap-view-components-in-custom-hoc.md)
- [Integration with `RootStore`](/recipes/integration-with-root-store.md)

### SolidJS <span class="vp-sidebar-solid-mark"><svg class="vp-sidebar-solid-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3" aria-hidden="true"><defs><linearGradient id="solid-a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><linearGradient id="solid-b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><linearGradient id="solid-c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><linearGradient id="solid-d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient></defs><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#solid-a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#solid-b)"/><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#solid-c)"/><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#solid-d)"/></svg></span>

- [SolidJS integration guide](/mobx-view-model/solid/integration.md)
- [`withViewModel` HOC](/mobx-view-model/solid/api/with-view-model.md)

#### API

- [`withViewModel` HOC](/solid/api/with-view-model.md)
- [`withPropsViewModel` HOC](/solid/api/with-props-view-model.md)
- [`ViewModelsProvider` Component](/solid/api/view-models-provider.md)
- [`useViewModel` hook](/solid/api/use-view-model.md)
- [`useCreateViewModel` hook](/solid/api/use-create-view-model.md)
- [`<OnlyViewModel />` Component](/solid/api/only-view-model.md)

### Other 🛸

- [Project Examples](/mobx-view-model/other/project-examples.md)
- [Dependent Packages](/mobx-view-model/other/dependent-packages.md)
- [DevTools](/mobx-view-model/other/dev-tools.md)
- [Vite plugin](/mobx-view-model/other/vite-plugin.md)

### Errors 🚨

- [Error `#1`: Active `ViewModel` not found](/mobx-view-model/errors/1.md)
- [&#x20;Error `#2`: `ViewModel` not found](/mobx-view-model/errors/2.md)
- [&#x20;Error `#3`: No access to `ViewModelStore`](/mobx-view-model/errors/3.md)
- [&#x20;Error `#4`: View component already wrapped](/mobx-view-model/errors/4.md)

### Warnings ⚠️

- [&#x20;Warning `#1`: [`ViewModelStore`](/api/view-model-store/interface) not found](/mobx-view-model/warnings/1.md)

### Introduction 👋

- [Overview](/mobx-view-model/v10/introduction/overview.md)
- [Getting started](/mobx-view-model/v10/introduction/getting-started.md)
- [MobX decorators and other](/mobx-view-model/v10/introduction/decorators.md)
- [Simple usage](/mobx-view-model/v10/introduction/usage/simple.md)
- [Playground](/mobx-view-model/v10/introduction/playground.md)

#### Usage

- [Simple usage](/v10/introduction/usage/simple.md)
- [With base implementation](/v10/introduction/usage/with-base-implementation.md)
- [Usage with View Model Store](/v10/introduction/usage/with-view-model-store.md)
- [Detailed configuration](/v10/introduction/usage/detailed-configuration.md)

### Core API ⚙️

- [View Models Overview](/mobx-view-model/v10/api/view-models/overview.md)
- [View Model Store Overview](/mobx-view-model/v10/api/view-model-store/overview.md)
- [View Model Lookup](/mobx-view-model/v10/api/other/view-model-lookup.md)

#### View Models

- [View Models Overview](/v10/api/view-models/overview.md)
- [View Model interface](/v10/api/view-models/interface.md)
- [View Model base implementation](/v10/api/view-models/base-implementation.md)
- [`ViewModelSimple`](/v10/api/view-models/view-model-simple.md)
- [`ViewModelsConfig` configuration object](/v10/api/view-models/view-models-config.md)

#### View Model Store

- [View Model Store Overview](/v10/api/view-model-store/overview.md)
- [View Model Store interface](/v10/api/view-model-store/interface.md)
- [View Model Store base implementation](/v10/api/view-model-store/base-implementation.md)

#### Other

- [View Model Lookup](/v10/api/other/view-model-lookup.md)

### React <span class="vp-sidebar-react-mark"><svg class="vp-sidebar-react-icon" xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348" aria-hidden="true"><circle cx="0" cy="0" r="2.05" fill="#61dafb"/><g stroke="#61dafb" stroke-width="1" fill="none"><ellipse rx="11" ry="4.2"/><ellipse rx="11" ry="4.2" transform="rotate(60)"/><ellipse rx="11" ry="4.2" transform="rotate(120)"/></g></svg></span>

- [React integration guide](/mobx-view-model/v10/react/integration.md)
- [Server-Side Rendering (Next.js)](/mobx-view-model/v10/react/ssr.md)
- [`withViewModel` HOC](/mobx-view-model/v10/react/api/with-view-model.md)
- [Using all props as payload for your `ViewModel`](/mobx-view-model/v10/recipes/all-props-as-payload.md)

#### API

- [`withViewModel` HOC](/v10/react/api/with-view-model.md)
- [`withPropsViewModel` HOC](/v10/react/api/with-props-view-model.md)
- [`ViewModelsProvider` Component](/v10/react/api/view-models-provider.md)
- [`useViewModel` hook](/v10/react/api/use-view-model.md)
- [`useCreateViewModel` hook](/v10/react/api/use-create-view-model.md)
- [`<OnlyViewModel />` Component](/v10/react/api/only-view-model.md)

#### Recipes 📜

- [Using all props as payload for your `ViewModel`](/v10/recipes/all-props-as-payload.md)
- [Connect other components to `VMComponent`](/v10/recipes/connect-components-to-vm-component.md)
- [Use generic ViewModel types in React components](/v10/recipes/generic-view-models-in-react.md)
- [Wrap in `observer()` all view components](/v10/recipes/observer-wrap-all-view-components.md)
- [Wrap view components in custom HOC](/v10/recipes/wrap-view-components-in-custom-hoc.md)
- [Integration with `RootStore`](/v10/recipes/integration-with-root-store.md)

### Other 🛸

- [Project Examples](/mobx-view-model/v10/other/project-examples.md)
- [Dependent Packages](/mobx-view-model/v10/other/dependent-packages.md)
- [DevTools](/mobx-view-model/v10/other/dev-tools.md)
- [Vite plugin](/mobx-view-model/v10/other/vite-plugin.md)

### Errors 🚨

- [&#x20;Error `#1`: Active `ViewModel` not found](/mobx-view-model/v10/errors/1.md)
- [&#x20;Error `#2`: `ViewModel` not found](/mobx-view-model/v10/errors/2.md)
- [&#x20;Error `#3`: No access to `ViewModelStore`](/mobx-view-model/v10/errors/3.md)

### Warnings ⚠️

- [&#x20;Warning `#1`: [`ViewModelStore`](/api/view-model-store/interface) not found](/mobx-view-model/v10/warnings/1.md)

### Introduction 👋

- [Overview](/mobx-view-model/v9/introduction/overview.md)
- [Getting started](/mobx-view-model/v9/introduction/getting-started.md)
- [MobX decorators and other](/mobx-view-model/v9/introduction/decorators.md)
- [Simple usage](/mobx-view-model/v9/introduction/usage/simple.md)
- [Playground](/mobx-view-model/v9/introduction/playground.md)

#### Usage

- [Simple usage](/v9/introduction/usage/simple.md)
- [With base implementation](/v9/introduction/usage/with-base-implementation.md)
- [Usage with View Model Store](/v9/introduction/usage/with-view-model-store.md)
- [Detailed configuration](/v9/introduction/usage/detailed-configuration.md)

### Core API ⚙️

- [View Models Overview](/mobx-view-model/v9/api/view-models/overview.md)
- [View Model Store Overview](/mobx-view-model/v9/api/view-model-store/overview.md)
- [View Model Lookup](/mobx-view-model/v9/api/other/view-model-lookup.md)

#### View Models

- [View Models Overview](/v9/api/view-models/overview.md)
- [View Model interface](/v9/api/view-models/interface.md)
- [View Model base implementation](/v9/api/view-models/base-implementation.md)
- [`ViewModelSimple`](/v9/api/view-models/view-model-simple.md)
- [`ViewModelsConfig` configuration object](/v9/api/view-models/view-models-config.md)

#### View Model Store

- [View Model Store Overview](/v9/api/view-model-store/overview.md)
- [View Model Store interface](/v9/api/view-model-store/interface.md)
- [View Model Store base implementation](/v9/api/view-model-store/base-implementation.md)

#### Other

- [View Model Lookup](/v9/api/other/view-model-lookup.md)

### React <span class="vp-sidebar-react-mark"><svg class="vp-sidebar-react-icon" xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348" aria-hidden="true"><circle cx="0" cy="0" r="2.05" fill="#61dafb"/><g stroke="#61dafb" stroke-width="1" fill="none"><ellipse rx="11" ry="4.2"/><ellipse rx="11" ry="4.2" transform="rotate(60)"/><ellipse rx="11" ry="4.2" transform="rotate(120)"/></g></svg></span>

- [React integration guide](/mobx-view-model/v9/react/integration.md)
- [Server Side Rendering](/mobx-view-model/v9/react/ssr.md)
- [`withViewModel` HOC](/mobx-view-model/v9/react/api/with-view-model.md)
- [Using all props as payload for your `ViewModel`](/mobx-view-model/v9/recipes/all-props-as-payload.md)

#### API

- [`withViewModel` HOC](/v9/react/api/with-view-model.md)
- [`ViewModelsProvider` Component](/v9/react/api/view-models-provider.md)
- [`useViewModel` hook](/v9/react/api/use-view-model.md)
- [`useCreateViewModel` hook](/v9/react/api/use-create-view-model.md)
- [`<OnlyViewModel />` Component](/v9/react/api/only-view-model.md)

#### Recipes 📜

- [Using all props as payload for your `ViewModel`](/v9/recipes/all-props-as-payload.md)
- [Connect other components to `VMComponent`](/v9/recipes/connect-components-to-vm-component.md)
- [Use generic ViewModel types in React components](/v9/recipes/generic-view-models-in-react.md)
- [Wrap in `observer()` all view components](/v9/recipes/observer-wrap-all-view-components.md)
- [Wrap view components in custom HOC](/v9/recipes/wrap-view-components-in-custom-hoc.md)
- [Integration with `RootStore`](/v9/recipes/integration-with-root-store.md)

### Other 🛸

- [Project Examples](/mobx-view-model/v9/other/project-examples.md)
- [Dependent Packages](/mobx-view-model/v9/other/dependent-packages.md)
- [Vite plugin](/mobx-view-model/v9/other/vite-plugin.md)

### Errors 🚨

- [&#x20;Error `#1`: Active `ViewModel` not found](/mobx-view-model/v9/errors/1.md)
- [&#x20;Error `#2`: `ViewModel` not found](/mobx-view-model/v9/errors/2.md)
- [&#x20;Error `#3`: No access to `ViewModelStore`](/mobx-view-model/v9/errors/3.md)

### Warnings ⚠️

- [&#x20;Warning `#1`: [`ViewModelStore`](/api/view-model-store/interface) not found](/mobx-view-model/v9/warnings/1.md)

### Other

- [Changelog](/mobx-view-model/changelog.md)
- [mobx-view-model](/mobx-view-model/changelog/core.md)
- [mobx-view-model-devtools](/mobx-view-model/changelog/devtools.md)
- [mobx-view-model-react](/mobx-view-model/changelog/react.md)
- [mobx-view-model-solid](/mobx-view-model/changelog/solid.md)
- [mobx-view-model-vite-plugin](/mobx-view-model/changelog/vite-plugin.md)
- [Untitled](/mobx-view-model/v10.md)
- [Untitled](/mobx-view-model/v9.md)