Tech Stack - 5Stack

5Stack is built with modern web technologies focused on performance, type safety, and developer experience.

Core Framework

Nuxt 3

The application is built on Nuxt 3, the Vue.js meta-framework:

// package.json
{
  "devDependencies": {
    "nuxt": "^3.17.2",
    "vue": "^3.5.13",
    "vue-router": "^4.5.1"
  }
}

Vue 3 Composition API

Modern reactive components with <script setup> syntax

File-based Routing

Automatic route generation from the pages/ directory

Auto Imports

Composables and utilities are auto-imported (components are manual)

TypeScript First

Full TypeScript support throughout the application

Component auto-imports are disabled in favor of explicit imports for better IDE performance:

// nuxt.config.ts
components: {
  dirs: [],  // Disable auto imports for components
}

State Management

Pinia

Pinia is the official state management solution for Vue 3:

{
  "dependencies": {
    "@pinia/nuxt": "^0.11.0",
    "pinia": "^3.0.2"
  }
}

Pinia stores use the Composition API with full TypeScript support:

export const useAuthStore = defineStore('auth', () => {
  const me = ref<InputType<GraphQLTypes['players'], typeof meFields>>();
  
  async function getMe(): Promise<boolean> {
    // Implementation
  }
  
  return { me, getMe };
});

GraphQL & API

Apollo Client + GraphQL Zeus

The GraphQL stack combines Apollo Client for data fetching with Zeus for type generation:

{
  "dependencies": {
    "@apollo/client": "^3.13.8",
    "@vue/apollo-composable": "^4.2.2",
    "graphql-zeus": "^7.0.5",
    "graphql-ws": "^6.0.4",
    "graphql-tag": "^2.12.6"
  },
  "devDependencies": {
    "@nuxtjs/apollo": "^5.0.0-alpha.14"
  }
}

Apollo Client Configuration

// plugins/apollo.client.ts
const httpLink = createHttpLink({
  credentials: 'include',
  uri: `https://${config.public.apiDomain}/v1/graphql`,
});

const wsClient = createClient({
  url: `wss://${config.public.apiDomain}/v1/graphql`,
  connectionParams: {
    credentials: 'include',
  },
});

const wsLink = new GraphQLWsLink(wsClient);

// Split queries and subscriptions
const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink,
);

Hasura GraphQL Engine

The backend uses Hasura for instant GraphQL APIs over PostgreSQL:

Real-time subscriptions
Role-based access control (RBAC)
Custom actions and event triggers
Webhook-based authentication

UI Framework

Tailwind CSS + shadcn-vue

The UI is built with Tailwind CSS and shadcn-vue components:

{
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^6.14.0",
    "shadcn-nuxt": "^2.1.0",
    "tailwindcss": "^3.4.17",
    "tailwindcss-animate": "^1.0.7",
    "autoprefixer": "^10.4.21",
    "postcss": "^8.5.3",
    "postcss-nesting": "^13.0.1"
  },
  "dependencies": {
    "@tailwindcss/forms": "^0.5.10",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "tailwind-merge": "^3.2.0",
    "reka-ui": "^2.8.0",
    "lucide-vue-next": "^0.508.0"
  }
}

Radix Primitives

Accessible component primitives via reka-ui (Vue port of Radix)

Lucide Icons

Beautiful, consistent icon set with lucide-vue-next

Dark Mode

Built-in dark mode support with @nuxtjs/color-mode

Custom Components

Pre-built components in components/ui/ directory

Form Handling

VeeValidate + Zod

Forms use VeeValidate with Zod schema validation:

{
  "dependencies": {
    "vee-validate": "^4.15.0",
    "@vee-validate/zod": "^4.15.0",
    "zod": "^3.24.4"
  }
}

Example usage:

import { toTypedSchema } from '@vee-validate/zod';
import * as z from 'zod';

const formSchema = toTypedSchema(z.object({
  teamName: z.string().min(3).max(32),
  shortName: z.string().min(1).max(5),
}));

Data Visualization

Chart.js

Charts and statistics use Chart.js with Vue wrapper:

{
  "dependencies": {
    "chart.js": "^4.4.9",
    "vue-chartjs": "^5.3.2"
  }
}

Internationalization

Nuxt i18n

Multi-language support with 16+ locales:

{
  "devDependencies": {
    "@nuxtjs/i18n": "^9.5.4"
  },
  "dependencies": {
    "javascript-time-ago": "^2.5.11"
  }
}

// nuxt.config.ts
i18n: {
  strategy: 'no_prefix',
  locales: [
    { code: 'en', name: 'English', file: 'en.json', flag: '🇬🇧' },
    { code: 'es', name: 'Español', file: 'es_ES.json', flag: '🇪🇸' },
    { code: 'de', name: 'Deutsch', file: 'de_DE.json', flag: '🇩🇪' },
    { code: 'fr', name: 'Français', file: 'fr_FR.json', flag: '🇫🇷' },
    // ... 12 more languages
  ],
  defaultLocale: 'en',
}

Translations are managed via Crowdin for community contributions.

Real-Time Communication

WebRTC

Peer-to-peer communication for voice and latency testing:

{
  "dependencies": {
    "simple-peer": "^9.11.1",
    "eventemitter3": "^5.0.1"
  },
  "devDependencies": {
    "@types/simple-peer": "^9.11.8"
  }
}

Developer Tools

Monaco Editor

In-app code editor for custom configurations:

{
  "dependencies": {
    "monaco-editor": "^0.55.1"
  }
}

VueUse

Collection of essential Vue Composition Utilities:

{
  "dependencies": {
    "@vueuse/core": "^14.2.0"
  }
}

Progressive Web App

Vite PWA

Offline-first PWA capabilities:

{
  "devDependencies": {
    "@vite-pwa/nuxt": "^1.0.0"
  },
  "dependencies": {
    "workbox-core": "^7.3.0",
    "workbox-precaching": "^7.3.0",
    "workbox-routing": "^7.3.0"
  }
}

Utilities

Additional Libraries

Data & Search

MiniSearch: Client-side full-text search (minisearch)
Typesense: Server-side search integration
@tanstack/vue-table: Powerful table components

File Handling

fflate: Fast compression/decompression
ansi-to-html: Terminal output rendering

UI Utilities

overlayscrollbars: Custom scrollbars
vaul-vue: Drawer/modal components
countries-and-timezones: Timezone utilities

Infrastructure

Cloudflare

Edge deployment and serverless functions:

{
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20250508.0",
    "wrangler": "^4.14.4"
  },
  "dependencies": {
    "aws4fetch": "^1.0.20"
  }
}

Build Tools

Vite

Nuxt 3 uses Vite for fast HMR and optimized builds:

// nuxt.config.ts
vite: {
  optimizeDeps: {
    include: ['monaco-editor'],
  },
}

TypeScript

Full TypeScript support:

{
  "devDependencies": {
    "typescript": "^5.8.3"
  }
}

Development Workflow

Scripts

{
  "scripts": {
    "dev": "nuxt dev --host 0.0.0.0",
    "build": "nuxt build --standalone",
    "preview": "nuxt preview",
    "codegen": "zeus https://$NUXT_PUBLIC_API_DOMAIN/v1/graphql ./generated --ts --td",
    "check-translations": "node scripts/check-translations.js"
  }
}

Architecture

System architecture and design patterns

GraphQL API

GraphQL API and type generation

Architecture

Components

Setup & Deployment

Contributing

​Core Framework

​Nuxt 3

Vue 3 Composition API

File-based Routing

Auto Imports

TypeScript First

​State Management

​Pinia

​GraphQL & API

​Apollo Client + GraphQL Zeus

​Hasura GraphQL Engine

​UI Framework

​Tailwind CSS + shadcn-vue

Radix Primitives

Lucide Icons

Dark Mode

Custom Components

​Form Handling

​VeeValidate + Zod

​Data Visualization

​Chart.js

​Internationalization

​Nuxt i18n

​Real-Time Communication

​WebRTC

​Developer Tools

​Monaco Editor

​VueUse

​Progressive Web App

​Vite PWA

​Utilities

​Additional Libraries

​Infrastructure

​Cloudflare

​Build Tools

​Vite

​TypeScript

​Development Workflow

​Scripts

Architecture

GraphQL API

Build docs developers (and LLMs) love

Core Framework

Nuxt 3

State Management

Pinia

GraphQL & API

Apollo Client + GraphQL Zeus

Hasura GraphQL Engine

UI Framework

Tailwind CSS + shadcn-vue

Form Handling

VeeValidate + Zod

Data Visualization

Chart.js

Internationalization

Nuxt i18n

Real-Time Communication

WebRTC

Developer Tools

Monaco Editor

VueUse

Progressive Web App

Vite PWA

Utilities

Additional Libraries

Infrastructure

Cloudflare

Build Tools

Vite

TypeScript

Development Workflow

Scripts