Vue Rx

👁️ RxJS integration for Vue.js.
Alternatives To Vue Rx
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Akita3,67846538 months ago279February 13, 202335apache-2.0TypeScript
🚀 State Management Tailored-Made for JS Applications
Vue Rx3,28914343a year ago28May 16, 201916mitJavaScript
👁️ RxJS integration for Vue.js.
Frontend Hard Mode Interview2,896
10 months ago7otherJavaScript
Vuejs2 Learn1,478
7 years ago4JavaScript
vuejs2 官网讲解 (vue.js 2 official website tutorials ,contains video , codes, baudi yun, youtube)
Proppy900495 years ago13April 13, 201913mitTypeScript
Functional props composition for UI components (React.js & Vue.js)
Remesh61074 months ago14July 13, 20233mitTypeScript
A CQRS-based DDD framework for large and complex TypeScript/JavaScript applications
Frint4979215 years ago32September 11, 201858mitJavaScript
Modular JavaScript framework for building scalable and reactive applications
Cookbook457218 days ago51January 13, 20213mitJavaScript
VueJS + NodeJS Evergreen Cookbook
Ant Simple Pro370
9 months ago7mitJavaScript
简洁,美观,快速上手,支持3大框架(vue3.0,react,angular,typescript);Concise, beautiful, quick to get started, support 3 big frameworks
4 years ago27mitJavaScript
My blogs write with markdown.
Alternatives To Vue Rx
Select To Compare

Alternative Project Comparisons

vue-rx Build Status

English | 简体中文

RxJS v6+ integration for Vue.js.


  • vue-rx v6 now only works with RxJS v6+ by default. If you want to keep using RxJS v5 style code, install rxjs-compat.


NPM + ES2015

rxjs is required as a peer dependency.

npm install vue vue-rx rxjs --save
import Vue from 'vue'
import VueRx from 'vue-rx'


When bundling via webpack, dist/vue-rx.esm.js is used by default. It imports the minimal amount of Rx operators and ensures small bundle sizes.

Global Script

To use in a browser environment, use the UMD build dist/vue-rx.js. When in a browser environment, the UMD build assumes window.rxjs to be already present, so make sure to include vue-rx.js after Vue.js and RxJS. It also installs itself automatically if window.Vue is present.


<script src=""></script>
<script src=""></script>
<script src="../dist/vue-rx.js"></script>


// provide Rx observables with the `subscriptions` option
new Vue({
  el: '#app',
  subscriptions: {
    msg: messageObservable
<!-- bind to it normally in templates -->
<div>{{ msg }}</div>

The subscriptions options can also take a function so that you can return unique observables for each component instance:

import { Observable } from 'rxjs'

Vue.component('foo', {
  subscriptions: function () {
    return {
      msg: new Observable(...)

The observables are exposed as vm.$observables:

const vm = new Vue({
  subscriptions: {
    msg: messageObservable

vm.$observables.msg.subscribe(msg => console.log(msg))

v-stream: Streaming DOM Events

vue-rx provides the v-stream directive which allows you to stream DOM events to an Rx Subject. The syntax is similar to v-on where the directive argument is the event name, and the binding value is the target Rx Subject.

<button v-stream:click="plus$">+</button>

Note that you need to declare plus$ as an instance of rxjs.Subject on the vm instance before the render happens, just like you need to declare data. You can do that right in the subscriptions function:

import { Subject } from 'rxjs'
import { map, startWith, scan } from 'rxjs/operators'

new Vue({
  subscriptions () {
    // declare the receiving Subjects$ = new Subject()
    // ...then create subscriptions using the Subjects as source stream.
    // the source stream emits in the format of `{ event: HTMLEvent, data?: any }`
    return {
        map(() => 1),
        scan((total, change) => total + change)

Or, use the domStreams convenience option:

new Vue({
  // requires `Rx` passed to Vue.use() to expose `Subject`
  domStreams: ['plus$'],
  subscriptions () {
    // use$

Finally, you can pass additional data to the stream using the alternative syntax:

<button v-stream:click="{ subject: plus$, data: someData }">+</button>

This is useful when you need to pass along temporary variables like v-for iterators. You can get the data by simply plucking it from the source stream:

const plusData$ =$.pipe(pluck('data'))

Starting in 3.1 you can also pass along extra options (passed along to native addEventListener as the 3rd argument):

<button v-stream:click="{
  subject: plus$,
  data: someData,
  options: { once: true, passive: true, capture: true }

See example for actual usage.

v-stream: Streaming Custom Events from Child Components

Similar to streaming DOM events, v-stream can be used on components as well and will create observables from custom events emitted by the child component. It works similar to v-on:

  <!-- Custom component -->
  <pagination v-on:change="pageChanged()"></pagination>

  <!-- v-stream with custom component -->
  <pagination v-stream:change="pageChange$"></pagination>

Other API Methods

$watchAsObservable(expOrFn, [options])

This is a prototype method added to instances. You can use it to create an observable from a value watcher. The emitted value is in the format of { newValue, oldValue }:

import { pluck, map } from 'rxjs/operators'

const vm = new Vue({
  data: {
    a: 1
  subscriptions () {
    // declaratively map to another property with Rx operators
    return {
      aPlusOne: this.$watchAsObservable('a').pipe(
        map(a => a + 1)

// or produce side effects...
    ({ newValue, oldValue }) => console.log('stream value', newValue, oldValue),
    err => console.error(err),
    () => console.log('complete')

The optional options object accepts the same options as vm.$watch.


Convert vue.$on (including lifecycle events) to Observables. The emitted value is in the format of { name, msg }:

import { interval } from 'rxjs'
import { take, takeUntil } from 'rxjs/operators'

const vm = new Vue({
  created () {
	  .subscribe((event) => console.log(,event.msg))

// vm.$once vue-rx version

// Another way to auto unsub:
let beforeDestroy$ = this.$eventToObservable('hook:beforeDestroy').pipe(take(1))


$subscribeTo(observable, next, error, complete)

This is a prototype method added to instances. You can use it to subscribe to an observable, but let VueRx manage the dispose/unsubscribe.

import { interval } from 'rxjs'

const vm = new Vue({
  mounted () {
    this.$subscribeTo(interval(1000), function (count) {

$fromDOMEvent(selector, event)

This is a prototype method added to instances. Use it to create an observable from DOM events within the instances' element. This is similar to Rx.Observable.fromEvent, but usable inside the subscriptions function even before the DOM is actually rendered.

selector is for finding descendant nodes under the component root element, if you want to listen to events from root element itself, pass null as first argument.

import { pluck } from 'rxjs/operators'

const vm = new Vue({
  subscriptions () {
    return {
      inputValue: this.$fromDOMEvent('input', 'keyup').pipe(
        pluck('target', 'value')


Convert function calls to observable sequence which emits the call arguments.

This is a prototype method added to instances. Use it to create a shared hot observable from a function name. The function will be assigned as a vm method.

<custom-form :onSubmit="submitHandler"></custom-form>
const vm = new Vue({
  subscriptions () {
    return {
      // requires `share` operator
      formData: this.$createObservableMethod('submitHandler')

You can use the observableMethods option to make it more declarative:

new Vue({
  observableMethods: {
    submitHandler: 'submitHandler$'
    // or with Array shothand: ['submitHandler']

The above will automatically create two things on the instance:

  1. A submitHandler method which can be bound to in template with v-on;
  2. A submitHandler$ observable which will be the stream emitting calls to submitHandler.



You cannot use the watch option to watch subscriptions, because it is processed before the subscriptions are set up. But you can use $watch in the created hook instead.


See /examples for some simple examples.



Popular Rxjs Projects
Popular Vue Projects
Popular Control Flow Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.