Integration with Vue

Observable comes with a built-in binding for Vue through an Observer component.

Observer

The Observer component enables you to wrap parts of your Vue template and make them reactive to changes in observables. It automatically tracks any observables used within its slot scope. When one of those observables changes, Observer will re-render only the content inside its slot.

Since Observer is built on the same reactivity system as autorun, it benefits from the same optimizations — like dependency tracking and batching updates. This ensures that your Vue application stays performant by default.

Syntax: Component Import

<script setup>
  import { Observer } from 'kr-observable/vue';
</script>

<template>
  <Observer>
    <!-- Content that uses observables -->
    <div>{{ someObservableData }}</div>
  </Observer>
</template>

Syntax: Global Plugin

import { createApp } from 'vue';
import { ObserverPlugin } from 'kr-observable/vue';
import App from './App.vue';

const app = createApp(App);

// Registers Observer globally
app.use(ObserverPlugin);
app.mount('#app');

Slots

default: The content to be made reactive.

Example

<script setup>
import { Observer } from 'kr-observable/vue';
import { makeObservable } from 'kr-observable';

// Create an observable state
const appState = makeObservable({
  count: 0,
  increase() {
    ++this.count;
  },
  decrease() {
    --this.count;
  },
});
</script>

<template>
  <Observer>
    <div>
      <button @click="appState.decrease">-</button>
      <div>{{ appState.count }}</div>
      <button @click="appState.increase">+</button>
    </div>
  </Observer>
</template>

Try it on stackblitz.com