Nuxt 3 + PostgreSQL

Key Features

• Hybrid rendering modes with Nuxt 3's routeRules for per-page SSR, SSG, or SPA configuration
• Auto-imported Vue components and composables with zero-configuration setup
• PostgreSQL 16 with advanced JSON/JSONB support for mixed relational and document data
• File-based routing system that automatically generates routes from pages directory structure
• Nitro server engine providing optimized API routes with h3 event handlers
• Built-in TypeScript support with automatic type generation for database schemas
• PostgreSQL's full-text search capabilities with ranking and highlighting for content applications
• Vue 3 Composition API integration with server-side data fetching using useFetch and $fetch

Common Use Cases

• 1Content management systems requiring complex content relationships and full-text search
• 2E-commerce platforms needing ACID-compliant transactions and inventory management
• 3Analytics dashboards leveraging PostgreSQL's window functions and Nuxt 3's reactive charts
• 4Multi-tenant SaaS applications using PostgreSQL's row-level security and Nuxt 3's middleware
• 5Real estate platforms combining PostGIS geospatial queries with Nuxt 3's interactive maps
• 6Enterprise applications requiring audit trails and complex reporting with PostgreSQL's JSON aggregation
• 7Progressive web applications needing offline-first capabilities with PostgreSQL's logical replication

Prerequisites

• Docker and Docker Compose installed with at least 1GB available RAM for PostgreSQL
• Node.js 18+ knowledge for Nuxt 3 development and understanding of Vue 3 Composition API
• Basic SQL knowledge for PostgreSQL schema design and query optimization
• Port 3000 available for Nuxt development server access
• Understanding of environment variables for database connection configuration
• Familiarity with Prisma ORM or similar database toolkit for schema migrations

docker-compose.yml

1services: 
2  nuxt: 
3    build: .
4    container_name: nuxt
5    environment: 
6      DATABASE_URL: postgresql://${DB_USER}:${DB_PASSWORD}@postgres:5432/${DB_NAME}
7    ports: 
8      - "3000:3000"
9    depends_on: 
10      - postgres
11    networks: 
12      - nuxt-network
13
14  postgres: 
15    image: postgres:16-alpine
16    environment: 
17      POSTGRES_DB: ${DB_NAME}
18      POSTGRES_USER: ${DB_USER}
19      POSTGRES_PASSWORD: ${DB_PASSWORD}
20    volumes: 
21      - postgres_data:/var/lib/postgresql/data
22    networks: 
23      - nuxt-network
24
25volumes: 
26  postgres_data: 
27
28networks: 
29  nuxt-network: 
30    driver: bridge

.env Template

1DB_NAME=nuxt
2DB_USER=nuxt
3DB_PASSWORD=changeme

Usage Notes

Individual Services(2 services)

Copy individual services to mix and match with your existing compose files.

nuxt:
  build: .
  container_name: nuxt
  environment:
    DATABASE_URL: postgresql://${DB_USER}:${DB_PASSWORD}@postgres:5432/${DB_NAME}
  ports:
    - "3000:3000"
  depends_on:
    - postgres
  networks:
    - nuxt-network

postgres:
  image: postgres:16-alpine
  environment:
    POSTGRES_DB: ${DB_NAME}
    POSTGRES_USER: ${DB_USER}
    POSTGRES_PASSWORD: ${DB_PASSWORD}
  volumes:
    - postgres_data:/var/lib/postgresql/data
  networks:
    - nuxt-network

Quick Start

1# 1. Create the compose file
2cat > docker-compose.yml << 'EOF'
3services:
4  nuxt:
5    build: .
6    container_name: nuxt
7    environment:
8      DATABASE_URL: postgresql://${DB_USER}:${DB_PASSWORD}@postgres:5432/${DB_NAME}
9    ports:
10      - "3000:3000"
11    depends_on:
12      - postgres
13    networks:
14      - nuxt-network
15
16  postgres:
17    image: postgres:16-alpine
18    environment:
19      POSTGRES_DB: ${DB_NAME}
20      POSTGRES_USER: ${DB_USER}
21      POSTGRES_PASSWORD: ${DB_PASSWORD}
22    volumes:
23      - postgres_data:/var/lib/postgresql/data
24    networks:
25      - nuxt-network
26
27volumes:
28  postgres_data:
29
30networks:
31  nuxt-network:
32    driver: bridge
33EOF
34
35# 2. Create the .env file
36cat > .env << 'EOF'
37DB_NAME=nuxt
38DB_USER=nuxt
39DB_PASSWORD=changeme
40EOF
41
42# 3. Start the services
43docker compose up -d
44
45# 4. View logs
46docker compose logs -f

One-Liner

Run this command to download and set up the recipe in one step:

1curl -fsSL https://docker.recipes/api/recipes/nuxt-postgres/run | bash

Troubleshooting