nuxt-codegen

nuxt-codegen

GraphQL Code Generator module for Nuxt3

Quick setup

• Add nuxt-codegen dependency to your project

# Using yarn
yarn add nuxt-codegen -D

# Using npm
npm install nuxt-codegen -D

# Using pnpm 
pnpm add nuxt-codegen -D

• Add nuxt-codegen to the modules section of nuxt.config.ts

export default defineNuxtConfig({
    modules: ['nuxt-codegen']
})

Note you also need graphql, and the plugins you want to use.

• Create your codegen.ts configuration file in the project's rootDir or use the Initialization Wizard

The code generator will now be executed before each build or after any changes made to your graphql documents.

Configuration

export default defineNuxtConfig({
  modules: ["nuxt-codegen", {
    /**
     * @default true
     * Only run codegen in development mode
     */

    devOnly: boolean;
    /**
     * @default ['.graphql', '.gql']
     * Which file extensions to watch for changes.
     */
    extensions: string[];

    /**
     * @default codegen.ts
     * Path to the config file (e.g. ./configs/codegen.config.ts)
     */
    configFile: string
  }],
});

Prior art

• @nuxt3/graphql-codegen-module
• nuxt-graphql-codegen

Development

• Clone this repository
• Install dependencies using pnpm pnpm install
• Prepare for development using pnpm dev:prepare
• Start development server using pnpm dev