Kinetic Gain • System Control Plane

Headless WP Vue Starter

Decoupled WordPress delivery modeling typed schema route-mapping contracts, secure draft preview token bridges, and edge CDN cache posture guidelines.

Active Layers
5
Operational layers mapped
Security & Health
3/ 2
Healthy / attention required
Flow Performance
100 ms
Average publish propagation
Starter Files
5
Production-ready scripts
⚠
Critical Architectural Recommendation

"Harden the preview bridge first, because editor trust collapses quickly when draft rendering and cache bypass feel unreliable."

Best use case: enterprise marketing websites requiring WordPress edit flexibility such as case studies, news items, and metadata updates without giving up pure Nuxt/Vue speed or SEO guarantees.

Decoupled Posture Files

Starter Template Explorer

Select a production template to inspect the editorial connection framework.

Search templates by path or purpose...
All Nuxt 3 / Vue Nuxt Server Route Vue WordPress / PHP Schema Contract
Nuxt 3 / Vue

starter/nuxt/nuxt.config.ts

Define runtime config, route rules, and WPGraphQL endpoint wiring for Nuxt.

Nuxt server route

starter/nuxt/server/api/preview.ts

Handle signed preview tokens and redirect editors into safe draft routes.

Vue

starter/nuxt/app.vue

Provide the root shell and shared layout mount for the decoupled frontend.

WordPress / PHP

starter/wordpress/wp-content/mu-plugins/headless-preview-bridge.php

Issue preview-safe URLs and align WordPress preview actions with the headless frontend.

Schema contract

starter/wpgraphql/content-map.json

Document how post types and templates map into Vue route components.

starter/wpgraphql/content-map.json Copy Raw 
{
  "page": "PageTemplate",
  "post": "ArticleTemplate",
  "caseStudy": "CaseStudyTemplate",
  "landingPage": "LandingPageTemplate"
}
Product depth

Headless WordPress only works when editorial trust, schema control, and launch speed stay connected.

This starter is not a generic Nuxt demo. It models the operating layer a SaaS, media, or B2B growth team needs when WordPress remains the editorial source of truth while Vue/Nuxt owns route performance, preview fidelity, structured data, and release-safe delivery.

GTM analyst lens

Protect launch velocity

Campaign, pricing, SEO, and content teams can ship without waiting on fragile CMS/frontend handoffs or discovering preview mismatches after stakeholder review.

Value architect lens

Reduce migration waste

Clarifies which work belongs in WordPress, GraphQL contracts, Nuxt routes, preview auth, and edge cache rules before a headless rebuild becomes a custom-maintenance tax.

Technical buyer lens

Make the contract explicit

Keeps content types, route templates, preview tokens, cache posture, schema mapping, and starter files visible as concrete implementation artifacts.

Executive lens

Explain the operating model

Shows leaders why the decoupled build is faster, safer, and easier to govern than a vague CMS modernization promise.

What these repos have in common

Every Kinetic Gain surface turns a brittle operating lane into reusable decision evidence.

This repo follows the suite pattern: define the messy handoff, expose the ownership model, attach proof artifacts, render a public surface, and provide machine-readable JSON so non-technical buyers and technical reviewers can inspect the same system story.