⛲️ vue-streams ⛲️
A simplified approach to using streams with Vue.
Install
npm i vue-streams rxjs@rc
rxjs v6 is recommended (currently in Release Candidate)
Setup
Install as a plugin:
Vue
Usage
Simple Example
<template> <div> <button @click="click$">Click me</button> random$ </div></template><script>;; sources: click$: fromMethod //infer the method name "click$" from the key random$: click$ //template subscribes to each key of the returned object;</script>
Standard Example
<template> <div id="demo"> <label>Search <input type="text" v-model="term"></label> <button @click="term = ''">Clear</button> <h2 v-if="noResults$"> message$ </h2> <transition-group tag="div" name="fade" class="people"> <div v-for="person of people$" :key="person.id"> <h2>personname</h2> <img :src="`${URL}/${person.image}`" alt=""> </div> </transition-group> </div></template><script> const URL = `https://foamy-closet.glitch.me` { return URL term: "sky" } sources: term$: { const search$ empty$ = term$ const people$ = const noResults$ = people$ const message$ = return people$ noResults$ message$ }</script><style>#demo font-family: "Avenir";people display: flex; flex-wrap: wrap; people > * padding: 025rem;fade-enter-activefade-leave-active transition: opacity 05s;fade-enterfade-leave-to opacity: 0;</style>
Crazy Example
<template> <div id="demo" @mousemove="x = $event.x"> <h3>x$</h3> <button @click="one$">One</button> <button @click="two">Two</button> <button @click="load$">Load Random</button> <input type="text" v-model="text"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade" @enter="enter$"> <p v-if="show">hello</p> </transition> <h2> message$ </h2> <MiniComp v-if="show"></MiniComp> </div></template><script> const MiniComp = sources: mounted$: beforeDestroy$: { mounted$ beforeDestroy$ } { return <div> <h2>MiniComp</h2> </div> } components: MiniComp { return show: false text: "john" } sources: one$: fromMethod two$: load$: fromMethod enter$: fromMethod text$: x: fromWatch { const buttons$ = const date$ = const person$ = load$ const message$ = return message$ x$: x }</script><style>#demo font-family: "Avenir";fade-enter-activefade-leave-active transition: opacity 05s;fade-enterfade-leave-to opacity: 0;</style>