Nuxt Graphql Middleware screenshot

Nuxt Graphql Middleware

Author Avatar Theme by Dulnan
Updated: 5 Jan 2026
68 Stars

A GraphQL Client for Nuxt 3

Categories

Overview:

The Nuxt GraphQL Middleware is a tool that allows developers to expose GraphQL queries and mutations as fully typed API routes. With this middleware, developers can easily integrate GraphQL into their Nuxt projects without the need for manual setup or configuration.

Features:

  • Exposes each query and mutation as an API route: The middleware automatically generates API routes for each GraphQL query and mutation, making it easy to access and work with GraphQL data from the server side.

  • GraphQL requests are only done on the server side: With this middleware, all GraphQL requests are handled on the server side, reducing the load on the client and improving performance.

  • Includes composables to perform queries or mutations: The middleware provides composables that can be used to perform GraphQL queries and mutations, making it easy to work with and manipulate GraphQL data.

  • Modify request headers, responses and handle errors: Developers can easily modify request headers and responses, as well as handle errors, using the middleware.

  • HMR for all GraphQL files: The middleware supports Hot Module Replacement (HMR) for all GraphQL files, allowing for seamless development and debugging.

  • Integration with Nuxt DevTools: Developers can take advantage of the integration with Nuxt DevTools to gain insights and debug their GraphQL API routes.

  • Full TypeScript integration: The middleware provides full TypeScript integration for schema, queries, mutations, and fragments using graphql-code-generator, ensuring type safety and improving development experience.

Installation:

To install the Nuxt GraphQL Middleware, follow these steps:

  1. Install the middleware package using npm or yarn:
npm install nuxt-graphql-middleware
  1. Configure the middleware in your Nuxt project. Minimal configuration is needed.

  2. Use the middleware in your project by writing your first query in a GraphQL file and accessing it via the provided API routes or composables.

For detailed installation and usage instructions, refer to the documentation.

Summary:

The Nuxt GraphQL Middleware is a powerful tool that simplifies the integration of GraphQL into Nuxt projects. With its features such as automatically exposing queries and mutations as API routes, server-side GraphQL requests, and full TypeScript integration, developers can easily work with GraphQL data in a Nuxt project. The middleware also provides convenient features like composables, request/response modification, error handling, and integration with Nuxt DevTools, making it a comprehensive solution for GraphQL integration in Nuxt applications.