Introduction

# What you write, and what you don't

A Vertex site has no application code. You do not write a router, a build config beyond four lines, a metadata layer, or an image pipeline. You write JSON describing what each page contains, and optionally Vue components for sections the bundled set doesn't cover.

The framework reads your content at build time, generates virtual modules that wire it into a Vue app, and pre-renders every route to its own HTML file via vite-ssg. The output is a folder of static files.

• You write: page JSON, a theme manifest, and any site-specific Vue components.
• The framework handles: routing, pre-rendering, metadata, sitemaps, images, theming, i18n, and draft gating.

# Requirements

Node 20.19 or newer, and npm 10.8 or newer. Vertex is published to the public npm registry under the MIT license.

node --version   # v20.19.0 or newer
npm --version    # 10.8.0 or newer

# Create a site

The scaffolder writes a complete, buildable site: content directory, starter theme, home page, and Vite config.

npx cms-create-site my-site
cd my-site
npm install
npm run dev

# Project layout

Every Vertex site has the same shape. Directories are auto-discovered — adding a locale directory or a component file is enough to register it, with no manifest to update.

site/
  content/
    content.config.json      # { "baseLocale": "en" }
    en/
      site.json              # title, description, url, theme
      shared.json            # header/footer content used by every page
      pages/
        home.json            # one file per page
  components/                # site-local Vue components, auto-globbed
  assets/img/                # originals; variants generated at build
  favicon.ico
  og-image.jpg
themes/<slug>/               # site-local theme (or install one from npm)
extensions/<slug>/           # site-local extension (optional)
vite.config.js
public/                      # generated — do not edit or commit

# The Vite config

This is the entire build configuration. The plugin takes the site directory, the themes to register, and the extensions to load.

import cms from '@koehler8/cms/vite';

export default {
  plugins: cms({
    siteDir: './site',
    themes: ['cms-theme-vertex'],
    extensions: ['@koehler8/cms-ext-compliance'],
  }),
};

# Commands

Four scripts cover the whole lifecycle. Everything else is editing JSON.

npm run dev                    # Vite dev server, hot reload
npm run build:ssg              # pre-render every route to dist/
npm run generate:public-assets # favicon, og-image, manifest icons
npm run preview                # serve the built dist/ locally