Vue.js support

Wundergraph can be be integrated with Vue through the Vue Query integration.

Register the Vue Query plugin :

1
2
3
4
5
6
7
8
import { createApp } from 'vue';
import { VueQueryPlugin } from '@tanstack/vue-query';
import App from './App.vue';
const app = createApp(App);
app.use(VueQueryPlugin);
app.mount('#app');

Create the hooks :

1
2
3
4
5
6
7
import { createHooks } from '@wundergraph/vue-query';
import { createClient, Operations } from './components/generated/client';
const client = createClient(); // Typesafe WunderGraph client
export const { useQuery, useMutation, useSubscription, useUser, useFileUpload, useAuth, queryKey } =
createHooks<Operations>(client);

Use the hooks :

1
2
3
4
const { data, error, isLoading } = useQuery({
operationName: 'Weather',
input: { forCity: city },
});

Examples

If you're interested in trying out WunderGraph with Nuxt, have a look at the following examples:

If you've got any questions, please join our Discord Community and ask away.

Was this article helpful to you?
Provide feedback

Edit this page