Skip to content

feat: add Nitro v3 Vite plugin integration with nitro: hook#50

Merged
productdevbook merged 2 commits intomainfrom
feat/vite-plugin-nitro-integration
Nov 4, 2025
Merged

feat: add Nitro v3 Vite plugin integration with nitro: hook#50
productdevbook merged 2 commits intomainfrom
feat/vite-plugin-nitro-integration

Conversation

@productdevbook
Copy link
Owner

Summary

Implements the new Nitro v3 pattern where Vite plugins can include a nitro: key to automatically register Nitro modules. This allows users to configure nitro-graphql with a single import instead of separately configuring both the Vite plugin and Nitro module.

Changes

  • Extract shared setup logic into src/setup.ts for reuse between the Nitro module and Vite plugin
  • Update src/vite.ts to include nitro: { setup() } hook that auto-registers the module
  • Accept NitroGraphQLOptions in the Vite plugin function for configuration
  • Update src/index.ts to use the extracted setup function
  • Update Vite playground to demonstrate the new single-import pattern

Benefits

Usage

New pattern (recommended)

// vite.config.ts
import { graphql } from 'nitro-graphql/vite'
import { nitro } from 'nitro/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    graphql({ framework: 'graphql-yoga' }), // Auto-registers Nitro module
    nitro()
  ]
})

Old pattern (still supported)

// nitro.config.ts
export default defineNitroConfig({
  modules: ['nitro-graphql'],
  graphql: { framework: 'graphql-yoga' }
})

Test plan

  • Build passes successfully
  • Vite playground works with new pattern
  • Backward compatibility maintained (old pattern still works)
  • TypeScript types are correct

Related

🤖 Generated with Claude Code

This implements the new Nitro v3 pattern where Vite plugins can include
a `nitro:` key to automatically register Nitro modules, eliminating the
need for separate configuration.

**Changes:**
- Extract shared setup logic into `src/setup.ts` for reuse
- Update `src/vite.ts` to include `nitro: { setup() }` hook
- Accept `NitroGraphQLOptions` in the Vite plugin function
- Update `src/index.ts` to use the extracted setup function
- Update Vite playground to demonstrate the new single-import pattern

**Benefits:**
- Single import: users only need `graphql()` from `nitro-graphql/vite`
- Plugin order independence (as per Nitro v3 changes)
- Better DX and consistency with modern Nitro v3 patterns
- Full backward compatibility with existing `modules: ['nitro-graphql']` approach

**Usage:**
```typescript
// New pattern (recommended)
import { graphql } from 'nitro-graphql/vite'
import { nitro } from 'nitro/vite'

export default defineConfig({
  plugins: [
    graphql({ framework: 'graphql-yoga' }),
    nitro()
  ]
})
```

**Related:**
- Nitro PR: nitrojs/nitro#3712

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@cloudflare-workers-and-pages
Copy link

Deploying nitro-graphql with  Cloudflare Pages  Cloudflare Pages

Latest commit: 705cb3c
Status: ✅  Deploy successful!
Preview URL: https://3cda0bf9.nitro-graphql.pages.dev
Branch Preview URL: https://feat-vite-plugin-nitro-integ.nitro-graphql.pages.dev

View logs

@productdevbook productdevbook merged commit 67837e0 into main Nov 4, 2025
1 check passed
@productdevbook productdevbook deleted the feat/vite-plugin-nitro-integration branch November 4, 2025 09:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant