nuxt4-graphql-client/README.md

[](https://nuxt-graphql-client.web.app)

[![nuxt-graphql-client](./docs/public/cover.png)](https://nuxt-graphql-client.web.app)

<h1 align="center">nuxt-graphql-client</h1>

<p align="center">⚡️ Minimal GraphQL Client + Code Generation for Nuxt</p>

<p align="center">
  <a href="https://github.com/diizzayy/nuxt-graphql-client/actions?query=branch%3Amain+event%3Apush">
    <img alt="CI" src="https://github.com/diizzayy/nuxt-graphql-client/actions/workflows/ci.yml/badge.svg?branch=main"/>
  </a>
  
  <a href="https://npmjs.com/package/nuxt-graphql-client">
      <img alt="Version" src="https://img.shields.io/npm/v/nuxt-graphql-client?color=blue&style=flat-square"/>
  </a>
  
  <a href="https://npmjs.com/package/nuxt-graphql-client">
      <img alt="Downloads" src="https://img.shields.io/npm/dt/nuxt-graphql-client?color=blue&style=flat-square"/>
  </a>
  
  <a href="https://opensource.org/licenses/MIT">
      <img alt="MIT" src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square"/>
  </a>

  <a href="https://codecov.io/gh/diizzayy/nuxt-graphql-client">
      <img alt="PRs Welcome" src="https://img.shields.io/codecov/c/gh/diizzayy/nuxt-graphql-client/main?style=flat-square"/>
  </a>
</p>

> ⚡️ Minimal GraphQL Client + Code Generation for Nuxt

- [Documentation](https://nuxt-graphql-client.web.app)

## Features

- Zero Configuration
- 🚀 [Nuxt 3+4](https://nuxt.com) Support
- Solves [missing fragments on server functions](https://github.com/Diizzayy/nuxt-graphql-client/issues/333)
- Full Typescript Support
- HMR (Hot Module Reload) for GraphQL documents
- Minimal [GraphQL Client](https://github.com/prisma-labs/graphql-request#graphql-request) + [Code Generation](https://www.graphql-code-generator.com/)

## Preview

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/nuxt-graphql)

## 💻 Development

- Clone this repository
- Make sure you have **pnpm v10+** installed (you can check with `pnpm -v`).
  If not, run `npm install -g pnpm` to get the latest version.
- Install dependencies using `pnpm install`
- Generate types using `pnpm dev:prepare`
- Open playground with `pnpm dev`

## Credits

[`nuxt-graphql-client`](#nuxt-graphql-client) is developed by [@diizzayy](https://github.com/diizzayy).

Special thanks to [@danielroe](https://github.com/danielroe) for helping me navigate and making this possible!

## License

[MIT](./LICENSE) License © 2022 [Diizzayy](https://github.com/diizzayy)