Nitro + Vite + GraphQL

A modern full-stack starter template combining Vite, Nitro, and GraphQL.

Rolldown Support

This project now supports Rolldown, a Rust-based bundler that’s significantly faster than traditional JavaScript bundlers. The rolldown branch uses:

• undefinedrolldown-vite: A drop-in replacement for Vite powered by Rolldown
• undefinedFaster builds: Experience significantly faster development and production builds
• undefinedSame API: Uses the same Vite API you’re familiar with

To use the Rolldown version:

git checkout rolldown
pnpm install
pnpm dev

Features

• ⚡️ Vite - Lightning fast frontend build tool
• 🚀 Nitro - Universal server framework
• 🔺 GraphQL - Type-safe API with nitro-graphql
• 📦 TypeScript - Full type safety
• 🎨 Interactive Demo - Built-in GraphQL playground
• 🪶 Lightweight - Tree-shakeable, minimal bundle size
• 🌐 Universal - Deploy anywhere Nitro supports
• 🔄 End-to-End Type Safety - From GraphQL schema to client
• 📦 Tiny Bundle - Optimized by nitro-graphql’s tree-shaking capabilities

Tech Stack

• undefinedFrontend: Vite + TypeScript
• undefinedBackend: Nitro v3
• undefinedAPI: GraphQL Yoga + nitro-graphql
• undefinedSchema: Code-first GraphQL with .graphql files

Getting Started

Install dependencies

npm install
# or
pnpm install

Development

npm run dev

Open http://localhost:3000 to see the interactive demo.

Build

npm run build

Preview

npm run preview

Project Structure

├── server/
│   └── graphql/
│       ├── config.ts          # GraphQL configuration
│       ├── schema.ts           # Schema definition
│       └── user/
│           ├── user.graphql    # User type schema
│           ├── getUser.resolver.ts
│           ├── createUser.resolver.ts
│           └── userStore.ts    # Mock data
├── src/
│   ├── main.ts                 # App entry point
│   └── app.ts                  # Demo UI
└── index.html

GraphQL API

The demo includes a simple User API with:

Queries

query GetUser($id: ID!) {
  getUser(id: $id) {
    id
    email
    name
    createdAt
  }
}

Mutations

mutation CreateUser($input: CreateUserInput!) {
  createUser(input: $input) {
    id
    email
    name
    createdAt
  }
}

Deployment

This starter supports all Nitro deployment presets. Check the Nitro deployment documentation for more details.

# Build for production
npm run build

# Deploy to your favorite platform
# Vercel, Netlify, Cloudflare Workers, AWS, etc.

Learn More

• Vite Documentation
• Nitro Documentation
• nitro-graphql
• GraphQL

License

MIT