Skip to content

Installation into Vue fails with global Vue #979

Open
@stickeegreg

Description

@stickeegreg

Describe the bug
Vue.use(VueApollo) fails when window.Vue exists.

To Reproduce
Create a webcomponent that uses Vue+Apollo and embed it in a page that uses Vue.

Expected behavior
this.$apollo should not be undefined in the webcomponent.

Actual behavior

import Vue from "vue";
import VueApollo from "vue-apollo";

// This line does nothing because the import has already called `window.Vue.use()`
Vue.use(VueApollo);

Versions
vue-apollo: 3.0.3

Additional context
This is due to the auto-installer. What's needed in my case is a way to turn it off.
It seems to run before any of my code, so it would have to be a separate.

Workaround
Fork the project and remove the auto-installer from https://github.com/vuejs/vue-apollo/blob/dev/packages/vue-apollo/src/index.js#L75

or

Replace
import VueApollo from "vue-apollo";
with

const VueApollo = (function () {
    let GlobalVue = null;
    let WindowVue = null;

    if (typeof window !== 'undefined') {
        GlobalVue = window.Vue;
        delete window.Vue;
    } else if (typeof global !== 'undefined') {
        GlobalVue = global.Vue;
        delete global.Vue;
    }

    const VueApollo = require("vue-apollo").default;

    if (WindowVue) {
        window.Vue = WindowVue;
    }

    if (GlobalVue) {
        global.Vue = GlobalVue;
    }

    return VueApollo;
})();

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions