The Nuxt example demonstrates the power of code generation, when it comes to integrating WunderGraph with frontend frameworks like Nuxt.
Let's start by configuring WunderGraph.
WunderGraph comes with a powerful framework for generating code. In this case, we're generating a generic TypeScript client that we can hook-up with Nuxt.
Define an Operation
Configure Nuxt, Wundergraph and Vue Query
Most of the configuration is done in a Nuxt plugin.
This properly setup Nuxt and Vue Query with server side rendering and hydration of the client.
Using from Nuxt
You can access the wundergraph client from vue files using the
useNuxtApp hook and grabbing the property that you provided in the nuxt plugin (prefixed by a
Your operations will be compiled into RPC endpoints, so all you have to do is to use the
useQuery hook and call your newly created API.
Deploy to WunderGraph Cloud
The easiest way to deploy your WunderGraph app is to use WunderGraph Cloud.