Vue integration

The Vue integration is a Vue 3 plugin that wraps the JavaScript RTI client and provides a Pinia store with reactive RTI state, along with a few ready-made components. It is open-source and available on GitHub and npm.

Installation

npm install --save inhumate-rti-vue

Setup

Register the plugin in your app entry point. This creates an RTI client instance and makes it available throughout the app via dependency injection and the Pinia store.

import { createApp } from "vue"
import rti from "inhumate-rti-vue"
import App from "./App.vue"

const app = createApp(App)
app.use(rti, { application: "My Vue App" })
app.mount("#app")

The options object is passed to the underlying RTI.Client constructor, so you can set url, connect, federation, etc. as described in the client libraries page.

The plugin also picks up federation, user, participant, role, fullName, host and station from URL query parameters, which is useful for embedded scenarios.

Accessing the client

With Pinia store (recommended)

The useRtiStore() composable gives you reactive access to connection state, runtime state, connected clients, channels and more:

import { useRtiStore } from "inhumate-rti-vue"

const rti = useRtiStore()

// Reactive state
console.log(rti.connected, rti.state, rti.time)

// Access the underlying RTI client for pub/sub
rti.client.subscribeText("hello", (msg) => console.log("Received:", msg))
rti.client.whenConnected(() => rti.client.publishText("hello", "Hello World!"))

Without Pinia

If you’re not using Pinia, you can inject the client directly:

import { inject } from "vue"

const rti = inject("rti-client")
rti.subscribeText("hello", (msg) => console.log("Received:", msg))
rti.whenConnected(() => rti.publishText("hello", "Hello World!"))

Components

The plugin registers two global components:

<RtiRuntimeState> — displays the current runtime state
<RtiImageSubscription> — subscribes to and displays an image channel