Vue 3 + Vite + GraphQL + Nitro

A full-stack application built with Vue 3, TypeScript, Vite, GraphQL, and Nitro server.

Features

• undefinedFrontend: Vue 3 + TypeScript + Vite + Tailwind CSS
• undefinedBackend: Nitro server with GraphQL API
• undefinedGraphQL: nitro-graphql with type-safe schema
• undefinedState Management: Pinia with Pinia Colada for data fetching
• undefinedRouting: Vue Router
• undefinedDocker: Multi-runtime support (Node.js & Bun)
• undefinedType Safety: Full TypeScript support

Tech Stack

• Vue 3 - Progressive JavaScript Framework
• Vite - Next Generation Frontend Tooling
• Nitro - Universal JavaScript Server
• nitro-graphql - GraphQL integration for Nitro
• Pinia - Vue Store
• Pinia Colada - GraphQL query library
• Tailwind CSS - Utility-first CSS framework

Prerequisites

• Node.js 24+ or Bun 1.3+
• Docker & Docker Compose (for containerized deployment)
• pnpm (recommended package manager)

Development

Install Dependencies

pnpm install

Run Development Server

pnpm dev

The app will be available at:

• Frontend & API: http://localhost:5173
• GraphQL Playground: http://localhost:5173/api/graphql

Build for Production

pnpm build

Preview Production Build

pnpm preview

Docker Deployment

The project supports multiple runtime environments through Docker:

Services

1. undefinedapp - Node.js runtime (default)
2. undefinedbun - Bun runtime (profile-based)
3. undefineddev - Development mode with hot-reload (profile-based)

Quick Start

Node.js (Production - Port 3000)

# Build and run
docker compose up app --build

# Run in background
docker compose up app --build -d

# View logs
docker compose logs -f app

Bun (Production - Port 3001)

# Build and run
docker compose --profile bun up --build

# Run in background
docker compose --profile bun up --build -d

# View logs
docker compose logs -f bun

Both Runtimes Simultaneously

# Run both Node.js (3000) and Bun (3001)
docker compose --profile bun up app bun --build

# In background
docker compose --profile bun up app bun --build -d

Development Mode

# Run with hot-reload (port 5173)
docker compose --profile dev up

# In background
docker compose --profile dev up -d

Docker Commands

# Stop all services
docker compose down

# View running containers
docker compose ps

# View logs
docker compose logs -f

# Restart a service
docker compose restart app

# Execute command in container
docker compose exec app sh

# Rebuild without cache
docker compose build --no-cache app

Environment Variables

The following environment variables are set in production:

• NODE_ENV=production
• NITRO_PORT=3000
• NITRO_HOST=0.0.0.0

Build Details

Node.js Build

• undefinedRuntime: Node.js 24 Alpine
• undefinedPackage Manager: pnpm
• undefinedPreset: node-server
• undefinedOutput Size: ~61 KB
• undefinedMulti-stage: Yes

Bun Build

• undefinedRuntime: Bun 1 Alpine
• undefinedPackage Manager: bun
• undefinedPreset: bun
• undefinedOutput Size: ~48 KB (22% smaller)
• undefinedMulti-stage: Yes

API Endpoints

REST API

• GET /api/hello - Health check endpoint

GraphQL API

• POST /api/graphql - GraphQL endpoint
• GET /api/graphql - GraphQL Playground

Example Queries

Get User

query GetUser($id: ID!) {
  getUser(id: $id) {
    __typename
    ... on User {
      id
      name
      email
      createdAt
    }
    ... on UserNotFoundError {
      message
      userId
    }
    ... on UnauthorizedError {
      message
      requiredPermission
    }
  }
}

Variables:

{
  "id": "1"
}

Create User

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

Variables:

{
  "input": {
    "email": "user@example.com",
    "name": "John Doe"
  }
}

Project Structure

.
├── server/                 # Nitro server
│   ├── graphql/           # GraphQL schema & resolvers
│   │   └── user/          # User module
│   └── routes/            # API routes
├── src/                   # Vue application
│   ├── components/        # Vue components
│   ├── composables/       # Composables (useUser, etc.)
│   ├── graphql/          # GraphQL client & SDK
│   ├── pages/            # Page components
│   └── router/           # Vue Router configuration
├── Dockerfile            # Node.js production build
├── Dockerfile.bun        # Bun production build
├── docker-compose.yml    # Multi-service orchestration
└── vite.config.ts        # Vite & Nitro configuration

GraphQL Features

• undefinedUnion Types: Error handling with union types
• undefinedType Safety: Auto-generated TypeScript types
• undefinedCode Generation: GraphQL Code Generator
• undefinedComposables: Vue composables for queries/mutations

Performance

• Client-side code splitting
• Optimized production builds
• Multi-stage Docker builds for minimal image size
• Static asset caching
• GraphQL query caching with Pinia Colada

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.