DEV Community

loading...
Cover image for Update of Vue Rx to Vue Next Rx

Update of Vue Rx to Vue Next Rx

NOPROD ☄️
French developer 💻 | i code with js, kotlin, java
・2 min read

link on npm: @nopr3d/vue-next-rx

Hello there !

The latest update of Vue is here, we are several to test it but we are still waiting for the update of certain dependencies.

So, instead of waiting I said to myself : "why don't you do it yourself?"

I chose the dependency with which I had the most affinity (vue-rx) and after a few days (and a lot of coffee) the dependency was up to date with Vue Next and its unit tests too.

Nice !

Now let's talk about this dependency, Vue Next offers a lot of changes (new lifecycle hooks, composition API, performance improvements, multiple root node, ...)

So I took all the existing functionality of vue-rx and I took the opportunity to also extend new features (Ref and Watch)

For example is how you can use Ref and Watch with the reactive way :

Ref

import { ref } from "@nopr3d/rx-vue-next";

// use ref like an Rx Subject
export default defineComponent({
  name: "Home",
  components: {},
  setup() {
    const msg = ref("Message exemple");

    setTimeout(() => {
      msg.value = "New message !";
    }, 2000);

    msg.subscribe((value) => {
      console.log(value); // After 2s will print : New message !
    });

    return { msg };
  },
});
Enter fullscreen mode Exit fullscreen mode
<!-- bind to it normally in templates -->
<!-- on change DOM is update too -->
<div>{{ msg }}</div>
Enter fullscreen mode Exit fullscreen mode

Watch

import { ref, watch } from "@nopr3d/rx-vue-next";

export default defineComponent({
  name: "Home",
  components: {},
  setup() {
    const msg = ref("Message exemple");

    watch(msg).subscribe((val) => {
      console.log(val); // After 2s will print : New message !
    });

    setTimeout(() => {
      msg.value = "New message !";
    }, 2000);

    return { msg };
  },
});
Enter fullscreen mode Exit fullscreen mode
<!-- bind to it normally in templates -->
<!-- on change DOM is update too -->
<div>{{ msg }}</div>
Enter fullscreen mode Exit fullscreen mode

Of course updated the test on vue next (it wasn't easy haha)

Tests


The example folder is also updated

If you wanna test it you can install it with :

npm install vue @nopr3d/vue-next-rx rxjs --save


This is my first publish on npm, feel free to open an issue !

Thanks and have a good day !

link on npm: @nopr3d/vue-next-rx

repo: vue-next-rx

Discussion (3)

Collapse
wick3drose profile image
wick3dr0se

Awesome work! I'm not going to pretend I fully understand but I did want to clarify that this won't be the last version of Vue, right? I'm assuming you mean latest, so I commented just to tell you about the typo 😁

Collapse
noprod profile image
NOPROD ☄️ Author • Edited

Thanks ! If i change for "last update" it's better? ^^

Collapse
wick3drose profile image
wick3dr0se

Yes! Change to "latest update" :)