Integration with Vue

Observable comes with a built-in Observer HOC for Vue.

Observer

The Observer component enables you to wrap parts of your Vue template and make them reactive to changes in observables. It works like a renderless component, automatically tracking any observables used within its slot scope. When one of those observables changes, Observer will re-render only the content inside its slot — keeping your UI up to date efficiently.

Syntax

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

<template>
  <Observer>
    <div>{{ someObservableData }}</div>
  </Observer>
</template>

ObserverPlugin

If preferred, you can register Observer globally via a plugin. After installation, <Observer> becomes available in all templates without additional imports.

import { ObserverPlugin } from 'kr-observable/vue'

const app = createApp(App);
app.use(ObserverPlugin);
app.mount('#app');

Under the Hood

Just like autorun, Observer leverages the same powerful reactivity system. It tracks dependencies during rendering and batches updates efficiently. This ensures that your Vue application stays performant by default, only re-rendering what's necessary when relevant observables change.

Example

A simple counter stackblitz.com