01 / Structural code-first integrity
Your code is the source of truth.
Define collections, permissions, and nested block objects in raw TypeScript. Postgres schemas update safely on server boot — no fragile click-ops sync pipelines.
Vueload Cloud — early access opening soon
Open-core · TypeScript-native
The Native Code-First Content Engine for Vue 3 & Nuxt 4
Define collections, permissions, and dynamic block layout trees in raw TypeScript. Auto-compiles PostgreSQL schemas on boot.
$ pnpm add @vueload/core
Install in your Nuxt app
Schema in. Admin UI out.
Your `vueload.config.ts` compiles into typed Postgres tables and a production-ready admin experience — no code generation step.
vueload.config.tsLive sync
const Pages = defineCollection({
slug: "pages",
fields: [
{ name: "title", type: "text", required: true },
{ name: "slug", type: "text", unique: true },
{
name: "layout",
type: "blocks",
blocks: [HeroBlock, ContentBlock],
},
],
access: {
read: () => true,
create: canWrite,
update: canWrite,
},
});Collections, access rules, and block trees defined once in TypeScript.
Admin UIlight theme
Collection
Pages
Layout blocks
Heroheadline · image
Contentheading · body
Draft
Light-themed studio rendered from the same schema — edit pages, media, and blocks instantly.
Built for the Vue ecosystem
See how Vueload compares to React-first Payload CMS and GUI-first Strapi when your stack is Vue 3 and Nuxt 4.
| Capability | Vueload | Payload CMS | Strapi |
|---|---|---|---|
| Vue 3 / Nuxt 4 native integration | First-class | React-first | GUI-first |
| Code-first TypeScript schema | Yes | Partial | No |
| Auto PostgreSQL schema sync on boot | Yes | Manual migrations | GUI-driven |
| Polymorphic layout blocks | Yes | React blocks | Dynamic zones |
| Self-hosted & portable | Yes | Yes | Yes |
| Light admin studio included | Yes | React admin | React admin |
01 / Structural code-first integrity
Your code is the source of truth.
Define collections, permissions, and nested block objects in raw TypeScript. Postgres schemas update safely on server boot — no fragile click-ops sync pipelines.
vueload.config.ts
Schema synced
collections: {
pages: {
fields: [
{ name: "title", type: "text", label: "Collection slug" },
{ name: "slug", type: "text", label: "Field type" },
{ name: "layout", type: "blocks", blocks: [HeroBlock] },
],
access: { read: () => true, create: canWrite },
},
}TypeScript collection → Postgres JSONB → REST /api/collections
02 / Polymorphic blocks builder
Dynamic layout trees, handled automatically.
Stack Hero, Content, and custom blocks natively. Vueload maps nested JSONB structures directly to your Nuxt frontend components.
POST /api/auth/login200 OK
Set-Cookie: vueload_tokenHttpOnly · Secure
GET /api/collectionsSchemas synced
Admin UI rendered42ms TTFB
vueload.config.ts
access: {
create: canWrite,
read: () => true,
},Engineered for pure developer velocity
02 / Polymorphic blocks builder
Dynamic layout trees, handled automatically.
Stack Hero, Content, and custom blocks natively. Vueload maps nested JSONB structures directly to your Nuxt frontend components.
03 / Zero obstacles extensibility
No proprietary layout runtimes. Just pure Vue.
Vueload acts as structural middleware — write standard Vue and Nuxt compositions in your workspace with zero rendering interference.
Request Vueload 1.0 Alpha access
Register for the developer preview. Include your stack, schema architecture, and deployment target.