Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Usage with WebComponent #1173

Open
rivoalrivoal opened this issue Mar 24, 2021 · 1 comment
Open

Usage with WebComponent #1173

rivoalrivoal opened this issue Mar 24, 2021 · 1 comment

Comments

@rivoalrivoal
Copy link

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>

image

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:
image

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

@ady642
Copy link

ady642 commented Jan 17, 2023

same for me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants