mobx-vue-lite

Lightweight Vue 3 bindings for MobX based on Composition API.

Demo: https://stackblitz.com/edit/mobx-vue-lite-demo

Install

``sh
npm install mobx mobx-vue-lite
`

Example

$3

Creates an observable object with the given properties, methods and computed values.

`html



`

$3

Is a renderless Vue component, which applies observer to its children.

#### Install as a global plugin (Optional)

`ts
// main.js
import { createApp } from 'vue'
import Observer from 'mobx-vue-lite'

const app = createApp(App)
app.use(Observer)
`

#### Or: Import and register it locally

`html



`

$3

Create a global observer from a local observer.

`ts
// store.ts
import { createGlobalObservable, useLocalObservable } from 'mobx-vue-lite'

export const useGlobalObservable = createGlobalObservable(() => {
return useLocalObservable(() => ({
count: 0,
get double() {
return this.count * 2
},
increment() {
this.count++
},
}))
})
`

`html



`

Tips

You can watch the state and its changes through Vue's watch:

`ts
import { watch } from 'vue'

const state = useLocalObservable(() => ({
count: 0,
increment() {
this.count++
},
}))

// watch the whole state
watch(state, (value) => {
console.log(value)
})

// watch part of a state
watch(() => state.value.count, (count) => {
console.log(count)
})
`

Class observables should work out-of-the-box. Just wrap the component with the component.

`html



`

Usage with Nuxt 3

To use the component globally a Nuxt 3 app, add this to your nuxt config:

`ts
import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
buildModules: ['mobx-vue-lite/nuxt'],
})
``

Credits

API was inspired from https://github.com/mobxjs/mobx-react-lite.

License

MIT