{"id":15278,"library":"vue-rx","title":"Vue RxJS Bindings","description":"Vue-Rx is an official integration library that provides RxJS bindings for Vue.js components, enabling developers to incorporate reactive programming paradigms directly into their Vue applications. It offers a `subscriptions` option for components to declaratively bind observable streams to data properties, and a `v-stream` directive to easily convert DOM events or custom component events into RxJS Observables. The current stable version, 6.2.0, primarily supports RxJS v6 and Vue.js 2.x, with releases focused on compatibility updates and feature enhancements. Its key differentiator is its first-party status within the Vue ecosystem, offering a streamlined, boilerplate-reducing approach to managing reactive state and event handling using RxJS, and it ships with TypeScript typings for enhanced developer experience.","status":"active","version":"6.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/vuejs/vue-rx","tags":["javascript","vue","rx","rxjs","typescript"],"install":[{"cmd":"npm install vue-rx","lang":"bash","label":"npm"},{"cmd":"yarn add vue-rx","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-rx","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for all reactive operations, required for creating and manipulating observables.","package":"rxjs","optional":false}],"imports":[{"note":"VueRx is a default export intended for plugin registration with `Vue.use()`. TypeScript typings for this default export were fixed in v6.0.1.","wrong":"import { VueRx } from 'vue-rx'","symbol":"VueRx","correct":"import VueRx from 'vue-rx'"},{"note":"Plugin installation via `Vue.use()` is required globally. Since v6.0.0, explicitly passing the RxJS library to `Vue.use()` is no longer necessary.","wrong":"new Vue({ el: '#app', plugins: [VueRx] })","symbol":"Vue.use","correct":"Vue.use(VueRx)"},{"note":"Core RxJS classes like `Subject` and `Observable` must be imported directly from the `rxjs` package, not `vue-rx`.","wrong":"import { Subject } from 'vue-rx'","symbol":"Subject","correct":"import { Subject } from 'rxjs'"},{"note":"Core RxJS classes like `Subject` and `Observable` must be imported directly from the `rxjs` package, not `vue-rx`.","wrong":"import { Observable } from 'vue-rx'","symbol":"Observable","correct":"import { Observable } from 'rxjs'"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueRx from 'vue-rx';\nimport { Subject } from 'rxjs';\nimport { map, startWith, scan } from 'rxjs/operators';\n\n// Install VueRx as a Vue plugin\nVue.use(VueRx);\n\nconst app = new Vue({\n  el: '#app',\n  // Define reactive subscriptions for component data\n  subscriptions() {\n    // Create a Subject to stream click events\n    this.plus$ = new Subject<{ event: MouseEvent, data?: any }>();\n\n    return {\n      // Bind 'count' data property to an observable stream\n      count: this.plus$.pipe(\n        map(() => 1), // Each click adds 1\n        startWith(0), // Initial value is 0\n        scan((total, change) => total + change) // Accumulate total\n      )\n    };\n  },\n  template: `\n    <div>\n      <h2>Counter: {{ count }}</h2>\n      <!-- Use v-stream to pipe DOM click events into the 'plus$' Subject -->\n      <button v-stream:click=\"plus$\">Increase Count</button>\n      <button @click=\"console.log('Resetting state often requires another stream or logic.')\">Reset (concept)</button>\n    </div>\n  `\n});","lang":"typescript","description":"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."},"warnings":[{"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`).","message":"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.","severity":"breaking","affected_versions":">=6.0.0"},{"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`.","message":"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.","severity":"breaking","affected_versions":">=4.0.0"},{"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`).","message":"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.","severity":"breaking","affected_versions":">=5.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=3.2.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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.","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.","error":"TypeError: this.mySubject$.pipe is not a function"},{"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.","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.","error":"TypeError: Cannot read properties of undefined (reading 'subscribe')"},{"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.","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.","error":"TypeError: Cannot read properties of undefined (reading 'Subject') OR Subject is not a constructor"}],"ecosystem":"npm"}