\n\n### [RxJS v7](https://github.com/ReactiveX/rxjs) integration for [Vue next]()\n\n\n\n\n\n\n \n\n> **NOTE**\n>\n> - vue-next-rx only works with RxJS v6+ by default. If you want to keep using RxJS v5 style code, install `rxjs-compat`.\n\n---\n\n# Installation\n\n#### NPM + ES2015 or more\n\n**`rxjs` is required as a peer dependency.**\n\n```bash\nnpm install vue @nopr3d/vue-next-rx rxjs --save\n```\n\n```js\nimport Vue from \"vue\";\nimport VueNextRx from \"@nopr3d/vue-next-rx\";\n\nVue.use(VueNextRx);\n```\n\n \n\nWhen bundling via webpack, `dist/vue-next-rx.esm.js` is used by default. It imports the minimal amount of Rx operators and ensures small bundle sizes.\n\nTo use in a browser environment, use the UMD build `dist/vue-next-rx.js`. When in a browser environment, the UMD build assumes `window.rxjs` to be already present, so make sure to include `vue-next-rx.js` after Vue.js and RxJS. It also installs itself automatically if `window.Vue` is present.\n\nExample:\n\n```html\n\n\n\n
\n
\n \n
\n
\n\n```\n\n \n\n---\n\n# Usage\n\n \n\n# Subscriptions\n\n```js\n// Expose `Subject` with domStream, use them in subscriptions functions\nexport default defineComponent({\n name: \"Home\",\n domStreams: [\"click$\"],\n subscriptions() {\n return {\n count: this.click$.pipe(\n map(() => 1),\n startWith(0),\n scan((total, change) => total + change)\n ),\n };\n});\n```\n\n```html\n
\n \n
\n\n
{{count}}
\n\n```\n\n### Or\n\n\n\n```js\n// Expose `Subject` with domStream, use them in subscriptions functions\nexport default defineComponent({\n name: \"Home\",\n domStreams: [\"action$\"],\n subscriptions() {\n this.action$.pipe(map(() => \"Click Event !\")).subscribe(console.log);\n // On click will print \"Click Event\"\n },\n});\n```\n\n## Tips\n\nYou can get the data by simply plucking it from the source stream:\n\n```js\nconst actionData$ = this.action$.pipe(pluck(\"data\"));\n```\n\nYou can bind Subject by this way\n\n```html // Bind with stream directives\n\nor\n\n```\n\n\n\n---\n\n# Ref\n\n```js\nimport { ref } from \"@nopr3d/vue-next-rx\";\n\n// use ref like an Rx Subject\nexport default defineComponent({\n name: \"Home\",\n components: {},\n setup() {\n const msg = ref(\"Message exemple\");\n\n setTimeout(() => {\n msg.value = \"New message !\";\n }, 2000);\n\n msg.subscribe((value) => {\n console.log(value); // After 2s will print : New message !\n });\n\n return { msg };\n },\n});\n```\n\n```html\n\n\n
\n```\n\n---\n\n \n\n# Other API Methods\n\n\n\n## `$watchAsObservable(expOrFn, [options])`\n\nThis is a prototype method added to instances. You can use it to create an observable from a Data. The emitted value is in the format of `{ newValue, oldValue }`:\n\n```js\nimport { ref } from \"@nopr3d/vue-next-rx\";\n\nexport default defineComponent({\n name: \"Home\",\n setup() {\n const msg = ref(\"Old Message\");\n setTimeout(() => (msg.value = \"New message incomming !\"), 1000);\n return { msg };\n },\n subscriptions() {\n return {\n oldMsg: this.$watchAsObservable(\"msg\").pipe(pluck(\"oldValue\")),\n };\n },\n});\n```\n\n```html\n\n\n
{{ msg }}
\n\n
{{oldMsg}}
\n\n```\n\n---\n\n## `$subscribeTo(observable, next, error, complete)`\n\nThis is a prototype method added to instances. You can use it to subscribe to an observable, but let VueNextRx manage the dispose/unsubscribe.\n\n```js\nimport { interval } from \"rxjs\";\n\nconst vm = new Vue({\n mounted() {\n this.$subscribeTo(interval(1000), function (count) {\n console.log(count);\n });\n },\n});\n```\n\n## `$fromDOMEvent(selector, event)`\n\nThis 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.\n\n`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.\n\n```js\nimport { pluck } from \"rxjs/operators\";\n\nconst vm = new Vue({\n subscriptions() {\n return {\n inputValue: this.$fromDOMEvent(\"input\", \"keyup\").pipe(\n pluck(\"target\", \"value\")\n ),\n };\n },\n});\n```\n\n```html\n\n
{{inputValue}}
\n```\n\n---\n\n## `$createObservableMethod(methodName)`\n\nConvert function calls to observable sequence which emits the call arguments.\n\nThis 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.\n\n```html\n\n```\n\n```js\nconst vm = new Vue({\n subscriptions() {\n return {\n // requires `share` operator\n formData: this.$createObservableMethod(\"submitHandler\"),\n };\n },\n});\n```\n\nYou can use the `observableMethods` option to make it more declarative:\n\n```js\nnew Vue({\n observableMethods: {\n submitHandler: \"submitHandler$\",\n // or with Array shothand: ['submitHandler']\n },\n});\n```\n\nThe above will automatically create two things on the instance:\n\n1. A `submitHandler` method which can be bound to in template with `v-on`;\n2. A `submitHandler$` observable which will be the stream emitting calls to `submitHandler`.\n\n[example](https://github.com/NOPR9D/vue-next-rx/blob/main/example/createObservableMethod.html)\n\n---\n\n## Example\n\nSee `/examples` for some simple examples.\n\n\n\n---\n\n## Test\n\nTest look goods, feel free to open an issue !\n\n\n\n---\n\n### Contributors\n\n
![](\"https://i.ibb.co/q5267TX/maxresdefault-2.jpg\")
\n![](\"https://avatars.githubusercontent.com/u/75882457?v=4\")
\n![](\"https://avatars.githubusercontent.com/u/48837852?v=4\")
\n