This quickstart guide will show you how to use WunderGraph with Nuxt and goes into a couple of details like server side rendering and TypeScript operations.
Creating a new WunderGraph project with Nuxt
We'll use the Nuxt example to get started. This example is a basic Nuxt application that uses WunderGraph to fetch data from the SpaceX GraphQL API .
Start Nuxt and WunderGraph
WunderGraph will now do some code generation and start the WunderNode and the Nuxt dev server. A new browser window will open at http://localhost:3000 . You should see the WunderGraph & Nuxt example homepage with the JSON result of the Dragons operation.
WunderGraph lives in the
.wundergraph directory by default. This is where you can configure your WunderGraph application and write your operations.
Let's take a look at the default configuration open
You can see that we have a single API configured, which is the SpaceX GraphQL API .
The API is introspected and added to the WunderGraph virtual graph, as you can see here:
Now let's take a look at the operations.
Operations are written in the
.wundergraph/operations directory. They can be written in Graphql or TypeScript. Let's check out the Dragons operation, open
This simply fetches the name and active status of all the SpaceX dragons, we can run this operation in Nuxt by using the generated hooks.
Calling the operation in Nuxt
pages/index.vue, there you will find the following code:
The operation name is the name of the file in the operations directory, without the extension. The
useQuery hook will return the result of the operation.
Let's modify the Dragons operation and add a limit parameter and return extra fields. Open
.wundergraph/operations/Dragons.graphql and change it to:
The WunderGraph server will automatically pick up on the changes and re-generate the types. Go back to
pages/index.tsx and you will see that the
Dragons operation now has a required
limit input parameter.
Refresh the page in your browser, the result will look like this:
Server side rendering
Wundergrah is configured with vue query in the plugin directory, with hydration of the server side state. This means that you can use the
useQuery hook in your components and it will automatically fetch the data on the server side and hydrate the client side state.
You can use the Nuxt devtools to inspect the vue-query payload.
WunderGraph allows you to write your operation using TypeScript. TypeScript Operations are a great way to use WunderGraph as a fully featured backend framework. Let's find out how to write a TypeScript operation.
This operation will return a user with the given id. We simply return a plain object here, but you can also return a database model or any other data type. We're using Zod to create the input schema, this will make sure that the input is validated before it reaches the handler.
You can call TypeScript operations just like Graphql operations, fully type safe. Note that the operation name is
users/get, this is the path to the operation file, without the extension. We use filebased router for operations, similar to Nuxt pages. This allows you to keep your operations organized.
Wunderbar! You've added your first Graphql API to Nuxt. Next up you might want to add a database, authentication and support uploads to turn Nuxt into a full stack powerhouse 😎.
Learn more advanced topics in our guides and get comfortable with WunderGraph.
Have a look at other examples we provide, to get a better understanding of WunderGraph.
Want to know more about WunderGraph?
If you're not yet sure what kind of problems WunderGraph can solve for you, check out the different use cases we support, and the different features we provide. You might also be interested to learn more about the architecture of WunderGraph. If you haven't read our Manifesto yet, it's a great way to better understand what we're working on and why.