[help wanted] using vue-rx in component package/plugin

[GrzegorzKazana]

Hello,
First of all, thanks for delivering this awesome plugin!

I am creating a Vue components package that under the hood uses vue-rx. The package is intended to be used as a plugin after publishing on npm. The problem is with vue-rx initialization. Components instantiated in client app are missing the features provided by vue-rx (for example methods like this.$createObservableMethod are undefined and subscriptions are not computed).

Currently, the package's entry point looks like this:

// main.ts at components package
import { PluginObject } from 'vue';
import VueRx from 'vue-rx';
import * as components from './components';

const RectiveComponents: PluginObject<never> = {
    install(Vue): void {
        Vue.use(VueRx);
        Object.values(components)
            .forEach(component => Vue.component(component.name, component));
    },
};

export default RectiveComponents;

And I am trying to use it in an app:

// main.ts at app using the package
import Vue from 'vue';
import RectiveComponents from 'reactive-components';

Vue.use(RectiveComponents);

// example usage
Vue.extend({
    template: '<ReactiveComponent ... />',
    data() { ... }
}).$mount('#app')

I have also tried adding Vue.use(VueRx) in the parent app, without no luck. RxJs is installed as a dependency on both projects.

As a side note, by adding the following lines to package's main.ts, the components work correctly (reactive methods are available etc.), but I am getting errors caused by Vue duplication.

// main.ts at components package
// ...
import Vue from 'vue';
Vue.use(VueRx);

const RectiveComponents: PluginObject<never> = { ... };
export default RectiveComponents;

I was wondering if maybe vue-rx could be used as a mixin, and be applied to each component, but I haven't found any info on that.

I'm running vue-rx@6.2.0, vue@2.6.10 and rxjs@6.5.3.

Big thanks in advance!

[regou]

Maybe it's Not good practice to install a plugin in another installation🤔
I been thinking extract some functions as utilities independently, Decouple them from the plugin

[GrzegorzKazana]

Thanks for reply, I am not sure if I understand correctly, do You mean extracting functionality form components in my plugin? The problem is though these components are rather logic-free, they just happen to use streams of data and dom events.

Also, after some investigation, I think I found the culprit of my problems (which not neccessairly means I know how to approach it). I believe the problem lies in that components in my package are being declared using Vue that has not vue-rx installed yet - since Vue.use(VueRx) happens at package installation. However, the VueRx installation definitely takes place, because new methods are added to Vue.prototype in parent app.

I am starting to wonder if I just should call Vue.use(VueRx) at the entry point of my component plugin (not inside install, just like in the 3rd code snippet in original post), and tackle the errors which I presume are caused by Vue duplication ([Vue warn]: $attrs is readonly and [Vue warn]: $listeners is readonly).

I am aware my problems are not strictly related/caused by vue-rx, so I am very thankful for any help but feel free to close it if You think this is not the right place for this discussion.

[GrzegorzKazana]

Hi, quick update on the issue:

I managed to solve my problems, it turned out the culprit was my local setup. The problem was caused by the fact that I was using npm link to develop and test component plugin and parent app, which meant that parent/node_modules/reactive-components also contained node_modules with it's own Vue (event tho it is only a peerDependcy/devDependency for ReactiveComponents). I am still not totally certain how, but I believe it caused Vue duplication. After removing reactive-components/node_modules the problem does not occur.

If someone is interested, the entry points of both apps are now as follows:

// main.ts at components package
import { PluginObject } from 'vue';
import * as components from './components';

const RectiveComponents: PluginObject<never> = {
    install(Vue): void {
        Object.values(components)
            .forEach(component => Vue.component(component.name, component));
    },
};

export default RectiveComponents;

import Vue from 'vue';
import VueRx from 'vue-rx';
import RectiveComponents from 'reactive-components';

Vue.use(VueRx);
Vue.use(RectiveComponents);

// ...

Thanks!