What it means

The @rs-x/vue package provides useRsxExpression for pre-built expressions and useRsxModel when you want to bind model fields with less boilerplate.

Practical value

You keep Vue components declarative while rs-x handles fine-grained dependency tracking. Vue updates automatically whenever the expression value changes.

Key points

useRsxExpression accepts a pre-built IExpression from rsx(...).
useRsxModel wires Vue into your existing rs-x model so the template stays in sync as that model changes.
Your rs-x model can be a plain object. You do not need to wrap it in Vue reactive(...) just to make rs-x updates work.
Subscriptions are disposed automatically when the component scope is destroyed.
Use rsx(..., { leafWatchRule })(model) to narrow which array or map entries trigger updates.

useRsxExpression — pre-built IExpression example

Build the expression once at module scope and reuse it. The Vue composable subscribes to those pre-built expressions and keeps the displayed values in sync while the inputs mutate the shared model.

Preview

Edit the code and the preview recompiles from that updated source.

Live demo

Code

import { rsx } from '@rs-x/expression-parser';
import { useRsxExpression, useRsxModel } from '@rs-x/vue';

// Create a module-scoped model and expression once
const model = {
  price: 100,
  quantity: 3,
};
const totalExpr = rsx<number>('price * quantity')(model);

export default {
  name: 'OrderTotal',
  setup() {
    useRsxModel(model);
    const total = useRsxExpression(totalExpr);

return {
      model,
      total,
    };
  },
  template: `
    <div>
      <label>
        Price
        <input
          :value="model.price"
          type="number"
          @input="model.price = Number($event.target.value)"
        />
      </label>
      <label>
        Quantity
        <input
          :value="model.quantity"
          type="number"
          @input="model.quantity = Number($event.target.value)"
        />
      </label>
      <dl>
        <div class="metricRow">
          <dt>Total</dt>
          <dd class="metricValue">{{ total }}</dd>
        </div>
      </dl>
    </div>
  `,
};

export function dispose() {
  totalExpr.dispose();
}

useRsxModel — component-owned model example

Use useRsxModel(model) when you want Vue to keep the template in sync with an rs-x model. Define the model, call the hook once in setup(), and keep binding that same model in the template.

Preview

Edit the code and the preview recompiles from that updated source.

Live demo

Code

Expression change transactions example

Run the same two async updates with and without a transaction and compare the emitted updates.

Preview

Edit the code and the preview recompiles from that updated source.

Live demo

Code

import { InjectionContainer } from '@rs-x/core';
import { rsx, RsXExpressionParserInjectionTokens } from '@rs-x/expression-parser';
import { useRsxModel } from '@rs-x/vue';

const orderModel = {
  price: 100,
  quantity: 2,
};

const statsModel = {
  commits: 0,
  expected: 0,
  lastMode: 'none',
  running: false,
};

const totalExpr = rsx<number>('price * quantity')(orderModel);

const commitSubscription = totalExpr.changed.subscribe(() => {
  statsModel.commits += 1;
});

const tx = InjectionContainer.get<{
  suspend(): void;
  continue(): void;
}>(
  RsXExpressionParserInjectionTokens.IExpressionChangeTransactionManager,
);

async function runWithoutTransaction() {
  statsModel.commits = 0;
  statsModel.expected = 2;
  statsModel.lastMode = 'Async updates';
  statsModel.running = true;
  orderModel.price += 10;
  await Promise.resolve();
  orderModel.quantity += 1;
  statsModel.running = false;
}

async function runWithTransaction() {
  statsModel.commits = 0;
  statsModel.expected = 1;
  statsModel.lastMode = 'Transaction';
  statsModel.running = true;
  tx.suspend();
  orderModel.price += 10;
  await Promise.resolve();
  orderModel.quantity += 1;
  tx.continue();
  statsModel.running = false;
}

export default {
  name: 'TransactionExample',
  setup() {
    const state = {
      order: orderModel,
      stats: statsModel,
    };
    useRsxModel(state);

return {
      state,
      runWithoutTransaction,
      runWithTransaction,
    };
  },
  template: `
    <div>
      <h3 class="previewSectionTitle">Measured values</h3>
      <dl>
        <div class="metricRow">
          <dt>Price</dt>
          <dd class="metricValue">{{ state.order.price }}</dd>
        </div>
        <div class="metricRow">
          <dt>Quantity</dt>
          <dd class="metricValue">{{ state.order.quantity }}</dd>
        </div>
        <div class="metricRow">
          <dt>Total</dt>
          <dd class="metricValue">{{ state.order.price * state.order.quantity }}</dd>
        </div>
        <div class="metricRow">
          <dt>Last action emit count</dt>
          <dd class="metricValue">{{ state.stats.commits }}</dd>
        </div>
        <div class="metricRow">
          <dt>Expected emit count</dt>
          <dd class="metricValue">{{ state.stats.expected }}</dd>
        </div>
        <div class="metricRow metricRowResult">
          <dt>Result</dt>
          <dd :class="state.stats.lastMode !== 'none' ? 'metricText' : 'metricText metricTextReserved'">
            {{
              state.stats.lastMode === 'none'
                ? ' '
                : state.stats.commits === state.stats.expected
                ? 'Verified: ' + state.stats.lastMode + ' emitted ' + state.stats.commits + ' time(s).'
                : 'Unexpected: ' + state.stats.lastMode + ' emitted ' + state.stats.commits + ' time(s), expected ' + state.stats.expected + '.'
            }}
          </dd>
        </div>
      </dl>

<h3 class="previewSectionTitle">How to read this</h3>
      <p class="previewNote">
        Both buttons apply the same two updates: increase price by 10 and quantity by 1.
      </p>
      <p class="previewNote">
        The difference is timing: the first button splits them into two async
        steps, while the transaction keeps those async steps batched until the
        end.
      </p>

<h3 class="previewSectionTitle">Try it</h3>
      <div class="previewActions">
        <button :disabled="state.stats.running" @click="runWithoutTransaction">
          Run async updates without transaction
        </button>
        <button :disabled="state.stats.running" @click="runWithTransaction">
          Run async updates with transaction
        </button>
      </div>
    </div>
  `,
};

export function dispose() {
  commitSubscription.unsubscribe();
  totalExpr.dispose();
}

Vue single-file component example

A complete Vue single-file component example with a plain object model bound through useRsxModel.

<script setup lang="ts">
import { useRsxModel } from '@rs-x/vue';

const model = {
  price: 100,
  quantity: 2,
};
useRsxModel(model);

function bump() {
  model.quantity += 1;
}
</script>

<template>
  <div>
    <p>Price: {{ model.price }}</p>
    <p>Quantity: {{ model.quantity }}</p>
    <p>Total: {{ model.price * model.quantity }}</p>

    <button @click="bump">Add one</button>
  </div>

Leaf watch rule example

Track only specific indices in a collection to avoid unnecessary updates.

import { computed } from 'vue';
import { rsx } from '@rs-x/expression-parser';
import type { IIndexWatchRule } from '@rs-x/state-manager';

const model = {
  items: ['apple', 'banana', 'cherry'],
};

const watchFirstOnly: IIndexWatchRule = {
  id: 'first-index-only',
  context: null,
  test(index, target) {
    return Array.isArray(target) && index === 0;
  },
  dispose() {},
};

const listExpr = rsx<string[]>('items', { leafWatchRule: watchFirstOnly })(model);

const firstItem = computed(() => listExpr.value?.[0]);

Installation example

Run rsx init in your Vue project to install the right packages and apply the setup automatically. See the CLI docs.

rsx init

Vue integration

What it means

Practical value

Key points

useRsxExpression — pre-built IExpression example

useRsxModel — component-owned model example

Expression change transactions example

Vue single-file component example

Leaf watch rule example

Installation example

Related docs