Usage with WebComponent

[rivoalrivoal]

Hello,

I'm trying to use Vue (2) functionality to generate webcomponents with vue-apollo. Here the source code of the component :

<template>
    <div>
        <div v-for="country in countries" v-bind:key="country.code">
            {{country.name}}
        </div>
    </div>
</template>

<script>
    import gql from 'graphql-tag';
    import Vue from 'vue';
    import VueApollo from 'vue-apollo';
    import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client/core';

    let cache = new InMemoryCache();
    const httpLink = new HttpLink({
        uri: "https://countries.trevorblades.com/"
    });
    const apolloClient = new ApolloClient({
        link: httpLink,
        cache,
    });
    // Create vue apollo provider
    const apolloProvider =  new VueApollo({
        defaultClient: apolloClient,
    });

    Vue.use(VueApollo);

    export default {
        name: "CCountry",
        created() {
            console.log("this.$apollo", this.$apollo);
        },
        apollo: {
            countries: {
                query: gql`{ countries { name code } }`,
            }
        },
        data () {
            return {
                countries: {}
            }
        },
        apolloProvider
    };
</script>
<style>
    div {
        color: blueviolet;
        font-size: 10px;
    }
</style>

When I use my component with vue-cli-service serve I have no problems and I have my DollarApollo :

<template>
    <div id="app">
        <CCountry/>
    </div>
</template>
<script>
    import CCountry from "./components/CCountry/CCountry";

    export default {
        name: "App",
        components: {
            CCountry
        }
    };
</script>

But, when I generate the webcomponent with vue-cli-service build --target wc --inline-vue --name country-wc ./src/components/CCountry/CCountry.vue, and open the demo file, DollarApollo is not included in Vue:

Version of packages : "vue": "^2.6.12", "vue-apollo": "^3.0.7", "@apollo/client": "^3.3.12",

[ady642]

same for me