├── .gitignore ├── README.md ├── build.config.ts ├── package.json ├── playground ├── app.vue ├── codegen.yml ├── generated │ └── schema.ts ├── nuxt.config.ts ├── package.json └── schema.graphql ├── src └── module.ts ├── tsconfig.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | node_modules 3 | 4 | # Logs 5 | *.log* 6 | 7 | # Temp directories 8 | .temp 9 | .tmp 10 | .cache 11 | 12 | # Yarn 13 | **/.yarn/cache 14 | **/.yarn/*state* 15 | 16 | # Generated dirs 17 | dist 18 | 19 | # Nuxt 20 | .nuxt 21 | .output 22 | .vercel_build_output 23 | .build-* 24 | .env 25 | .netlify 26 | 27 | # Env 28 | .env 29 | 30 | # Testing 31 | reports 32 | coverage 33 | *.lcov 34 | .nyc_output 35 | 36 | # VSCode 37 | .vscode 38 | 39 | # Intellij idea 40 | *.iml 41 | .idea 42 | 43 | # OSX 44 | .DS_Store 45 | .AppleDouble 46 | .LSOverride 47 | .AppleDB 48 | .AppleDesktop 49 | Network Trash Folder 50 | Temporary Items 51 | .apdisk 52 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `nuxt-graphql-codegen` 2 | 3 | > [GraphQL Code Generator](https://www.graphql-code-generator.com/) module for Nuxt3 / Nuxt Bridge. 4 | 5 | ## Quick setup 6 | 7 | 1. Add `nuxt-graphql-codegen` dependency to your project 8 | 9 | ```shell 10 | # Using yarn 11 | yarn add -D nuxt-graphql-codegen 12 | 13 | # Using npm 14 | npm install --save-dev nuxt-graphql-codegen 15 | ``` 16 | 17 | Note you also need `graphql`, `@graphql-codegen/cli` and the [plugins](https://www.graphql-code-generator.com/plugins) you want to use. 18 | 19 | 2. Add `nuxt-graphql-codegen` to the `modules` section of your `nuxt.config.ts` 20 | 21 | ```ts 22 | import { defineNuxtConfig } from "nuxt"; 23 | 24 | export default defineNuxtConfig({ 25 | modules: ["nuxt-graphql-codegen"], 26 | }); 27 | ``` 28 | 29 | 3. Create your `codegen.yml` or `codegen.json` configuration file in the project's `rootDir` with the [Initialization Wizard](https://www.graphql-code-generator.com/docs/getting-started/installation#initialization-wizard) or [manually](https://www.graphql-code-generator.com/docs/config-reference/codegen-config) 30 | 31 | ```shell 32 | yarn graphql-codegen init 33 | ``` 34 | 35 | That's it! The code generator will now be executed before each build, it will also watch for changes in `.graphql` and `.gql` files in development mode. 36 | 37 | ## Configuration 38 | ```js 39 | import { defineNuxtConfig } from 'nuxt' 40 | 41 | export default defineNuxtConfig({ 42 | modules: ["nuxt-graphql-codegen", { 43 | /** 44 | * @default false 45 | */ 46 | devOnly: boolean; 47 | /** 48 | * @default ['.graphql', '.gql'] 49 | */ 50 | extensions: string[]; 51 | }], 52 | }); 53 | ``` 54 | 55 | ## Development 56 | 57 | - Run `npm run dev:prepare` to generate type stubs. 58 | - Use `npm run dev` to start [playground](./playground) in development mode. 59 | -------------------------------------------------------------------------------- /build.config.ts: -------------------------------------------------------------------------------- 1 | import { defineBuildConfig } from "unbuild"; 2 | 3 | export default defineBuildConfig({ 4 | declaration: true, 5 | rollup: { 6 | emitCJS: false, 7 | cjsBridge: true, 8 | }, 9 | entries: ["src/module"], 10 | externals: ["pathe", "@nuxt/kit", "@nuxt/types"], 11 | }); 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-graphql-codegen", 3 | "description": "GraphQL Code Generator module for Nuxt3 / Nuxt Bridge", 4 | "version": "0.3.3", 5 | "author": "Pascal Martineau ", 6 | "homepage": "https://github.com/lewebsimple/nuxt-graphql-codegen#readme", 7 | "bugs": { 8 | "url": "https://github.com/lewebsimple/nuxt-graphql-codegen/issues" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/lewebsimple/nuxt-graphql-codegen.git" 13 | }, 14 | "license": "MIT", 15 | "type": "module", 16 | "exports": { 17 | ".": { 18 | "import": "./dist/module.mjs", 19 | "require": "./dist/module.cjs" 20 | } 21 | }, 22 | "main": "./dist/module.cjs", 23 | "types": "./dist/types.d.ts", 24 | "files": [ 25 | "dist" 26 | ], 27 | "scripts": { 28 | "prepack": "nuxt-module-build", 29 | "dev": "nuxi dev playground", 30 | "dev:build": "nuxi build playground", 31 | "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground" 32 | }, 33 | "dependencies": { 34 | "@nuxt/kit": "^3.0.0-rc.11" 35 | }, 36 | "devDependencies": { 37 | "@graphql-codegen/cli": "^2.6.3", 38 | "@graphql-codegen/typescript": "^2.5.1", 39 | "@lewebsimple/eslint-config-vue": "^0.5.5", 40 | "@nuxt/module-builder": "latest", 41 | "@nuxt/types": "^2.15.8", 42 | "eslint": "latest", 43 | "graphql": "^16.5.0", 44 | "nuxt": "^3.0.0-rc.11" 45 | }, 46 | "peerDependencies": { 47 | "@graphql-codegen/cli": "^2", 48 | "graphql": "^15 || ^16" 49 | }, 50 | "eslintConfig": { 51 | "extends": "@lewebsimple/eslint-config-vue" 52 | }, 53 | "publishConfig": { 54 | "access": "public" 55 | } 56 | } -------------------------------------------------------------------------------- /playground/app.vue: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /playground/codegen.yml: -------------------------------------------------------------------------------- 1 | schema: ./schema.graphql 2 | generates: 3 | ./generated/schema.ts: 4 | plugins: 5 | - typescript 6 | -------------------------------------------------------------------------------- /playground/generated/schema.ts: -------------------------------------------------------------------------------- 1 | export type Maybe = T | null; 2 | export type InputMaybe = Maybe; 3 | export type Exact = { [K in keyof T]: T[K] }; 4 | export type MakeOptional = Omit & { [SubKey in K]?: Maybe }; 5 | export type MakeMaybe = Omit & { [SubKey in K]: Maybe }; 6 | /** All built-in and custom scalars, mapped to their actual values */ 7 | export type Scalars = { 8 | ID: string; 9 | String: string; 10 | Boolean: boolean; 11 | Int: number; 12 | Float: number; 13 | }; 14 | 15 | export type Query = { 16 | __typename?: 'Query'; 17 | hello: Scalars['String']; 18 | }; 19 | -------------------------------------------------------------------------------- /playground/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | import NuxtGraphqlCodegen from ".."; 2 | 3 | export default defineNuxtConfig({ 4 | modules: [NuxtGraphqlCodegen], 5 | }); 6 | -------------------------------------------------------------------------------- /playground/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "my-module-playground", 4 | "devDependencies": {} 5 | } -------------------------------------------------------------------------------- /playground/schema.graphql: -------------------------------------------------------------------------------- 1 | type Query { 2 | hello: String! 3 | } 4 | -------------------------------------------------------------------------------- /src/module.ts: -------------------------------------------------------------------------------- 1 | import { dirname } from "pathe"; 2 | import { defineNuxtModule, logger } from "@nuxt/kit"; 3 | import { generate, loadCodegenConfig } from "@graphql-codegen/cli"; 4 | 5 | interface ModuleOptions { 6 | devOnly: boolean; 7 | extensions: string[]; 8 | } 9 | 10 | export default defineNuxtModule({ 11 | meta: { 12 | name: "nuxt-graphql-codegen", 13 | configKey: "graphqlCodegen", 14 | }, 15 | defaults: { 16 | devOnly: false, 17 | extensions: [".graphql", ".gql"] 18 | }, 19 | async setup({ devOnly, extensions }, nuxt) { 20 | // Run in development mode only 21 | if (devOnly && !nuxt.options.dev) { 22 | return; 23 | } 24 | // Load GraphQL Code Generator configuration from rootDir 25 | const { config, filepath } = await loadCodegenConfig({ 26 | configFilePath: nuxt.options.rootDir, 27 | }); 28 | const cwd = dirname(filepath); 29 | 30 | // Execute GraphQL Code Generator 31 | async function codegen() { 32 | try { 33 | const start = Date.now(); 34 | await generate({ ...config, cwd }, true); 35 | const time = Date.now() - start; 36 | logger.success(`GraphQL Code Generator generated code in ${time}ms`); 37 | } catch (e: unknown) { 38 | logger.error(`GraphQL Code Generator configuration not found.`); 39 | } 40 | } 41 | 42 | // Configure hooks 43 | nuxt.hook("build:before", codegen); 44 | nuxt.hook("builder:watch", async (_event, path) => { 45 | if (extensions.some((ext) => path.endsWith(ext))) { 46 | await codegen(); 47 | } 48 | }); 49 | }, 50 | }); 51 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./playground/.nuxt/tsconfig.json" 3 | } --------------------------------------------------------------------------------