Headless WP Vue Starter

Board-ready Kinetic Gain surface and starter export for headless WordPress + Vue delivery, preview flow, and WPGraphQL-backed route architecture.

• Live: http://headless.kineticgain.com/
• Repo: https://github.com/mizcausevic-dev/headless-wp-vue-starter

Why this exists

Headless CMS projects often look clean in a pitch deck and brittle in production. By then:

• WordPress previews stop matching what editors expect
• Vue routes drift away from the schema they depend on
• metadata and route ownership become split across too many layers
• teams discover that “decoupled” only meant “harder to debug”

headless-wp-vue-starter models the architecture needed to keep WordPress editorial-first while Vue owns speed, route rendering, and SEO control.

What it includes

• TypeScript control plane for WordPress editorial flow, WPGraphQL contracts, preview bridging, and frontend delivery posture
• starter export files across Nuxt, preview tokens, WordPress mu-plugins, and schema mapping
• reusable outputs for architecture health, publish-flow latency, and integration ownership
• prerendered static site, JSON payloads, screenshots, docs, and starter artifacts

What this product does

Headless WP Vue Starter is a production-readiness proof surface for teams that want WordPress editorial control without accepting slow pages, broken previews, or unclear ownership between CMS and frontend layers.

• SaaS GTM analyst view: protects launch velocity for pricing pages, campaign pages, SEO content, and product narratives by making preview, routing, metadata, and cache behavior visible before release.
• SaaS value architect view: reduces migration waste by showing which responsibilities belong in WordPress, WPGraphQL, Nuxt/Vue, preview-token handling, edge cache, and deployment checks.
• Technical buyer view: provides concrete starter artifacts for Nuxt, preview bridging, mu-plugins, and schema mapping instead of leaving the architecture as a diagram.
• Executive narrative: explains how a decoupled CMS model can be faster, safer, and easier to govern when the operating contract is explicit.

What these repos have in common

This repo follows the broader Kinetic Gain pattern: turn brittle operating handoffs into reusable decision evidence. Each surface names the risk, maps the owners, ships proof artifacts, exposes JSON, and gives both non-technical buyers and technical reviewers a shared way to inspect the same system story.

Routes

• /
• /architecture-lane
• /content-flow
• /verification
• /docs

API

• /api/dashboard/summary
• /api/architecture-lane
• /api/content-flow
• /api/starter-files
• /api/verification
• /api/sample

Screenshots

Starter Export

• starter/nuxt/nuxt.config.ts
• starter/nuxt/app.vue
• starter/nuxt/server/api/preview.ts
• starter/wordpress/wp-content/mu-plugins/headless-preview-bridge.php
• starter/wpgraphql/content-map.json

Local Development

cd headless-wp-vue-starter
npm install
npm run dev

Open:

• http://127.0.0.1:5384/
• http://127.0.0.1:5384/architecture-lane
• http://127.0.0.1:5384/content-flow
• http://127.0.0.1:5384/verification
• http://127.0.0.1:5384/docs

Validation

• npm run verify
• npm run prerender
• npm run render:assets

Docs

• Architecture
• Origin
• Changelog