@mathislair/mtbreactive-vue

Vue 3 composable (useReactive) on top of @mathislair/mtbreactive-client. Returns a Ref<Row[]> that updates as snapshot/change frames arrive.

Install

npm install @mathislair/mtbreactive-vue @mathislair/mtbreactive-client

Setup

// main.ts
import { createApp } from 'vue';
import { ReactiveClient } from '@mathislair/mtbreactive-client';
import { provideReactiveClient } from '@mathislair/mtbreactive-vue';
import App from './App.vue';

const client = new ReactiveClient('ws://localhost:8080/ws');

const app = createApp(App);
app.runWithContext(() => provideReactiveClient(client));
app.mount('#app');

(or call provideReactiveClient(client) from the setup() of a top-level component.)

Usage

<script setup lang="ts">
import { useReactive } from '@mathislair/mtbreactive-vue';

interface Message { id: number; body: string }

const props = defineProps<{ roomId: number }>();

const messages = useReactive<Message>(
  'message',
  { col: 'conversation_id', value: props.roomId },
);
</script>

<template>
  <ul>
    <li v-for="m in messages" :key="m.id">{{ m.body }}</li>
  </ul>
</template>

Reactive scope

The scope can be a Ref<ScopeKey>; the composable resubscribes automatically when the scope value changes:

import { computed } from 'vue';

const scope = computed(() => ({ col: 'conversation_id', value: props.roomId }));
const messages = useReactive('message', scope);

Options

| Option | Purpose | | ------------ | ------------------------------------------------------ | | client | Override the injected client. Useful in tests. | | initial | Rows shown until the first frame arrives. | | onError(c) | Notified when an error frame arrives. |

License

MIT