codegen

@nuxt3-graphql/codegen

GraphQL Code Generator for Nuxt.js! ⚡️

Features

• Load your codegen config file from the root of your Nuxt3 project
• Generate code from your GraphQL schema and operations on every build and in dev mode

Install

yarn add -D @nuxt3-graphql/codegen @graphql-codegen/cli graphql
# npm i -D @nuxt3-graphql/codegen @graphql-codegen/cli graphql

Create a condegen config file either manually or with the wizard:

yarn graphql-codegen init

Usage

Within your nuxt.config.js add the following:

import { defineNuxtConfig } from "nuxt3";

export default defineNuxtConfig({
  buildModules: [
    "@nuxt3-graphql/codegen",
  ],
  codegen: {
    // Specify and/or override graphql-codegen configuration if needed
  },
});

This will automativally generate the GraphQL code based on your codegen config file each time Nuxt builds your project (this also works in dev mode).

Refer to the GraphQL Code Generator documentation for more information.

Typescript

For Nuxt config typescript support, add the following to tsconfig.json:

{
  "compilerOptions": {
    "types": [
      "@nuxt3-graphql/codegen"
    ]
  }
}