Villus for Vue >=2.7,<3.0 example

App.vue

<script setup>
import { useClient } from "villus";
import {graphqlOptions} from "@/grapql/client"
//...
useClient(graphqlOptions);
</script>

client.js

import { defaultPlugins, handleSubscriptions } from "villus";

const subscriptionClient = new SubscriptionClient(process.env.VUE_APP_HASURA_WEBSOCKET, {});
const subscriptionForwarder = (operation) => subscriptionClient.request(operation);

export const graphqlOptions = {
    url: process.env.VUE_APP_HASURA_URL,
    use: [handleSubscriptions(subscriptionForwarder), ...defaultPlugins()],
    cachePolicy: "network-only",
    headers: {
        "x-hasura-role": "reader",
    },
};

Example.vue

<script setup>
import { useSubscription } from "villus";
import {myPiniaStore} from '@/stores/'
import MY_SUBSCRIPTION from "@/graphql/subscriptions/

const { data, error } = useSubscription({ 
  query: MY_SUBSCRIPTION, 
  variables: { id: 1 } 
});

watchEffect(() => {
  if (error.value) {
    console.error(error.value);
  } else {
    if (data.value?.items) {
      myPiniaStore.setItems(data.value.items);
    }
  }
});
</script>