Vue RxJS Bindings

Common errors

• TypeError: this.mySubject$.pipe is not a function

  cause Attempting to use RxJS 6+ pipeable operators (like `pipe`, `map`, `scan`) with an older RxJS v5 `Subject` or without correctly importing the `pipe` method.
  fix Ensure `rxjs` v6 or later is installed (`npm install rxjs@^6.0.0`). If using `rxjs-compat`, verify all RxJS operators are imported from `rxjs/operators` and `pipe` is used correctly, or update to RxJS v6-style operator usage.

• TypeError: Cannot read properties of undefined (reading 'subscribe')

  cause An observable defined within the `subscriptions` option might not be properly initialized, or `this.$observables.myStream` is accessed before the component is fully mounted and the streams are created.
  fix Verify that all observables are correctly returned from the `subscriptions` function. Access `this.$observables` within appropriate component lifecycle hooks (e.g., `mounted` or `created`) where streams are guaranteed to exist.

• TypeError: Cannot read properties of undefined (reading 'Subject') OR Subject is not a constructor

  cause The RxJS `Subject` or `Observable` class is not correctly imported into the JavaScript module, or in a global script environment, `window.rxjs` is not available when `vue-rx.js` is loaded.
  fix For module-based projects, ensure explicit imports: `import { Subject } from 'rxjs'`. For global script usage, load `rxjs.umd.js` (or similar UMD build) *before* `vue-rx.js` in your HTML.

Warnings

• breaking Vue-Rx v6+ is exclusively compatible with RxJS v6+. Attempts to use older RxJS versions (v5 or v4) directly will result in runtime errors. For projects requiring RxJS v5 compatibility with `vue-rx` v6, the `rxjs-compat` package must be installed and configured.
  Fix: Upgrade `rxjs` to `^6.0.0` or newer compatible versions (e.g., `npm install rxjs@^6.0.0`). If needing RxJS v5 style code, install `rxjs-compat` alongside `rxjs` v6 (`npm install rxjs rxjs-compat`).
• breaking Prior to v4.0.0, errors originating from subscription streams were silently ignored by default. Since v4.0.0, all errors from RxJS subscription streams are now thrown, making the user responsible for catching and handling these potential errors to prevent application crashes.
  Fix: Implement robust error handling using RxJS operators such as `catchError` within your observable pipes for any streams defined in the `subscriptions` option or generated via `v-stream`.
• breaking TypeScript typings for `vue-rx` were updated in v5.0.0 to align with Vue core 2.5 typings. Projects using Vue 2.4 or older should remain on `vue-rx` 4.x to avoid TypeScript compatibility issues.
  Fix: Upgrade Vue.js to 2.5+ (`npm install vue@^2.5.0`) or, if Vue.js cannot be upgraded, downgrade `vue-rx` to a `4.x` version (`npm install vue-rx@^4.0.0`).
• gotcha When using the `v-stream` directive on a custom component, it relies on the component properly emitting custom events. Since v3.2.0, `v-stream` can create observables from custom events, but the child component must explicitly use `this.$emit('eventName', payload)` for `v-stream` to capture them.
  Fix: Ensure that any child components targeted by `v-stream` are correctly emitting custom events using `this.$emit('your-event-name', eventData)` for the directive to function as expected.

Install

• npm install vue-rx npm
• yarn add vue-rx yarn
• pnpm add vue-rx pnpm

Imports

• VueRx
  wrong:

  import { VueRx } from 'vue-rx'

  correct:

  import VueRx from 'vue-rx'

  VueRx is a default export intended for plugin registration with `Vue.use()`. TypeScript typings for this default export were fixed in v6.0.1.
• Vue.use
  wrong:

  new Vue({ el: '#app', plugins: [VueRx] })

  correct:

  Vue.use(VueRx)

  Plugin installation via `Vue.use()` is required globally. Since v6.0.0, explicitly passing the RxJS library to `Vue.use()` is no longer necessary.
• Subject
  wrong:

  import { Subject } from 'vue-rx'

  correct:

  import { Subject } from 'rxjs'

  Core RxJS classes like `Subject` and `Observable` must be imported directly from the `rxjs` package, not `vue-rx`.
• Observable
  wrong:

  import { Observable } from 'vue-rx'

  correct:

  import { Observable } from 'rxjs'

  Core RxJS classes like `Subject` and `Observable` must be imported directly from the `rxjs` package, not `vue-rx`.

Quickstart

Demonstrates `vue-rx` setup, registering the plugin, defining a reactive `count` property using the `subscriptions` option, and utilizing `v-stream` to link a button click event to an RxJS Subject for real-time updates.

import Vue from 'vue';
import VueRx from 'vue-rx';
import { Subject } from 'rxjs';
import { map, startWith, scan } from 'rxjs/operators';

// Install VueRx as a Vue plugin
Vue.use(VueRx);

const app = new Vue({
  el: '#app',
  // Define reactive subscriptions for component data
  subscriptions() {
    // Create a Subject to stream click events
    this.plus$ = new Subject<{ event: MouseEvent, data?: any }>();

    return {
      // Bind 'count' data property to an observable stream
      count: this.plus$.pipe(
        map(() => 1), // Each click adds 1
        startWith(0), // Initial value is 0
        scan((total, change) => total + change) // Accumulate total
      )
    };
  },
  template: `
    <div>
      <h2>Counter: {{ count }}</h2>
      <!-- Use v-stream to pipe DOM click events into the 'plus$' Subject -->
      <button v-stream:click="plus$">Increase Count</button>
      <button @click="console.log('Resetting state often requires another stream or logic.')">Reset (concept)</button>
    </div>
  `
});