Nuxt 4 + Vue + PostgreSQL
Production guidelines for Nuxt 4 server routes and universal rendering, Vue 3 Composition API, and PostgreSQL via a typed query layer.
- Formats
- 4 files
- AGENTS.md
- 39 lines
- CLAUDE.md
- 15 lines
- Languages
- TypeScript
- Updated
- Oct 2026
- Used by
- 4 projects
Writes .claude/skills/nuxt-vue-postgres/SKILL.md
$ curl -s --create-dirs -o .claude/skills/nuxt-vue-postgres/SKILL.md https://stackitfast.com/rules/nuxt-vue-postgres/SKILL.mdRule files
Works with Cursor · Claude Code · Windsurf · AGY
Architecture notes
Architecture Overview
Standardized production guidelines for Nuxt 4, Vue 3 Composition API, and PostgreSQL, using Nitro server routes as the backend layer.
Verified Real-World Adoption
This pattern is the backbone of several production internal-tool and developer-tool platforms: Baserow (no-code database, Nuxt + Vue frontend over a Django/FastAPI + PostgreSQL backend), Hoppscotch (API testing client, Vue + Nuxt + Node + PostgreSQL), Directus (headless CMS, Vue + Node + PostgreSQL), n8n (workflow automation, Vue + Node + PostgreSQL), and NocoDB (smart spreadsheet, Vue + Node + PostgreSQL/MySQL).
Key Architectural Nuances
- Nitro as the Backend: Server routes deploy as part of the same Nuxt build output, targeting Node, Deno, or edge runtimes without a separate backend service to provision.
- SSR Payload Reuse:
useFetch/useAsyncDatadeduplicate server-rendered data on hydration, avoiding the double-fetch flash common in naive SPA-over-API setups.
Frequently asked questions
Does this AGENTS.md work with Cursor, Claude Code, and Windsurf?
Yes — AGENTS.md is the open, cross-tool standard read by Cursor, Claude Code, Windsurf, and 30+ other agents. A dedicated .mdc file is also included for Cursor's native .cursor/rules format.
Why do server routes live under server/api/ instead of a separate backend?
Nuxt's Nitro engine is a full server runtime built into the framework, so server/api/ routes deploy alongside the frontend as one unit (to Node, a Cloudflare Worker, or a serverless function) without standing up a separate Express/Fastify service. This removes an entire deployment target and keeps client and server types in one project.
Why use useFetch instead of a plain fetch() call?
useFetch (and its lower-level $fetch) integrates with Nuxt's SSR payload: data fetched on the server during the initial render is serialized and reused on the client instead of being re-fetched, avoiding a duplicate request and a flash of loading state on hydration.
Do I need to self-host PostgreSQL for this stack?
No — for most Nuxt apps, point your DATABASE_URL at Supabase or Neon and skip running a Postgres server yourself; both have a free tier that covers a solo project or early-stage small team comfortably. The self-hosted tools referenced above (Baserow, Directus, n8n) run their own Postgres because they're distributed as self-hostable platforms, not because this stack requires it.
Used in production
Explore all stackselekcsv
5Keeping parsing, compiled-validator generation, fuzzy column mapping and bitmap error tracking in one dependency-free core package lets every UI framework reuse identical import logic instead of six separate implementations.
WeKnora
Retrieval, agents and the API sit in one Go service, and parsing is delegated to a Python gRPC service. Storage backends are pluggable, so the same codebase runs as a lite SQLite binary or a full Kubernetes deployment on existing Postgres, Elasticsearch or vector databases.
Nextcloud
Server internals (OC) are kept separate from a versioned public API (OCP) so that independently namespaced apps under apps/ can extend Nextcloud without depending on private implementation details, while database support is validated per-engine in CI.
Gitea
One Go process fronted by XORM abstracts four relational databases and pluggable search/storage backends, so the same codebase scales from a single SQLite file on a Raspberry Pi to a MySQL- or PostgreSQL-backed team instance.