README
vue-rx
English | 简体中文
RxJS v6 integration for Vue.js.
BREAKING CHANGES from 5.0
- vue-rx v6 now only works with RxJS v6 by default. If you want to keep using RxJS v5 style code, install
rxjs-compat
.
Installation
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'
Vue.use(VueRx)
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.
Example:
<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="../dist/vue-rx.js"></script>
Usage
// 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))
: Streaming DOM Events v-stream
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