Why?

@wbc-ui/press2 lets you build a documentation/content site by describing its navigation and meta as JSON — no per-page Vue components, no router boilerplate. It composes on top of the @wbc-ui/core2 (WBC) engine, so page bodies are WBC items.

A whole site from one call

import { createPressApp } from '@wbc-ui/press2';
import { menu, side, menu0 } from './config/navigation';

createPressApp({
  menu, side, menu0,
  meta: { title: 'My Documentation', description: 'Built with press2', author: 'Your Name' },
});

One config. One createPressApp(). Navigation, layout, and meta are data — pages are WBC items.

What is @wbc-ui/press2?

A Vue 2.7+ docs-site engine that renders a navigable site from JSON navigation config. Use the full app factory or drop the layout component into an existing app.

| Surface | Role | |---|---| | createPressApp({ menu, side, menu0, meta }) | App factory — boots a complete press site from config | | <PressLayout :menu :side :menu0 :meta> | The layout component — top menu, sidebar, and content region | | menu / side / menu0 | Navigation config: primary menu, sidebar tree, and the home/landing menu | | meta | Site meta: title, description, author, … |

Who's it for? Teams shipping documentation, knowledge bases, blogs, or catalog sites who want a JSON-configured site rather than a hand-built Vue app.

Usage Examples

Level 1 — Component-level usage

<template>
  <PressLayout :menu="menu" :side="side" :menu0="menu0" :meta="meta" />
</template>

<script>
import { PressLayout } from '@wbc-ui/press2';
import { menu, side, menu0 } from './config/navigation';
export default {
  components: { PressLayout },
  data: () => ({ menu, side, menu0, meta: { title: 'My Docs' } }),
};
</script>

Level 2 — Full app factory

import { createPressApp } from '@wbc-ui/press2';
import { menu, side, menu0 } from './config/navigation';

createPressApp({
  menu, side, menu0,
  meta: { title: 'Handbook', description: 'Internal docs', author: 'Platform Team' },
});

🚀 Try it in 30 seconds

Explore a live press2 site at wb-press.wbc-ui.com — see the navigation config drive the whole site, and copy the structure into your own project.

Installation

Prerequisites

• Node.js ≥ 18 · Vue 2.7.x (Vue 3 tracked as @wbc-ui/press3)
• @wbc-ui/core2 — the WBC engine that renders page bodies

npm (recommended)

npm install @wbc-ui/press2 @wbc-ui/core2

# Peer dependencies — install once per project
npm install vue@^2.7.16 vuetify@^2.7.2

Yarn / pnpm

yarn add @wbc-ui/press2 @wbc-ui/core2 vue@^2.7.16 vuetify@^2.7.2
pnpm add @wbc-ui/press2 @wbc-ui/core2 vue@^2.7.16 vuetify@^2.7.2

Usage

// Either boot a full app:
import { createPressApp } from '@wbc-ui/press2';
createPressApp({ menu, side, menu0, meta });

// …or drop the layout into an existing app:
import { PressLayout } from '@wbc-ui/press2';

Troubleshooting common install errors

| Symptom | Cause | Fix | |---|---|---| | Site renders unstyled | Vuetify CSS isn't loaded | Import once: import 'vuetify/dist/vuetify.min.css'; | | Cannot find module '@wbc-ui/press2' | npm couldn't resolve the package | npm ls @wbc-ui/press2; if empty, npm install @wbc-ui/press2@latest. | | Page bodies don't render | @wbc-ui/core2 not installed | press2 renders pages as WBC items — npm install @wbc-ui/core2. |

For worked examples, see wb-press.wbc-ui.com.

⚡ The Engine Under the Hood

• Configuration over Code: The entire site architecture is derived from a plain JSON object mapping.
• WBC Integration: Every page body is simply a @wbc-ui/core2 data item (usually pointing to a Markdown file).
• Batteries included: Automatically handles routing, responsive layout collapsing, and document head management.

💎 Free vs Pro

@wbc-ui/press2 is open-source and a complete docs engine today — the app factory, layout, JSON navigation, and WBC-rendered page bodies are free. The Pro lane follows the same open-core tiering as the underlying @wbc-ui/core2 engine.

| Capability | Free | Pro | |---|---|---| | createPressApp + <PressLayout> | ✅ Full | ✅ Full | | JSON navigation (menu / side / menu0) + meta | ✅ Full | ✅ Full | | WBC-rendered page bodies | ✅ | ✅ | | Depth / item caps on rendered WBC trees | core2 free caps | ∞ (via core2 Pro) | | Advanced engine hooks & headless extraction | — | ✅ (via core2 Pro) |

👉 Compare in detail → · Buy Pro →

🌐 Ecosystem

@wbc-ui/press2 is a sibling package in the @wbc-ui monorepo. Every package is published to npm and shares the same versioning line.

| Package | What it adds | Status | |---|---|---| | @wbc-ui/core2 | "UI as Data" engine — the foundation | 🟢 GA | | @wbc-ui/code2 | JSON-driven code editor + live run | 🟢 GA | | @wbc-ui/chart2 | ECharts integration | 🟢 GA | | @wbc-ui/dataviewer2 | JSON / data-table explorer | 🟢 GA | | @wbc-ui/latex2 | LaTeX math rendering | 🟢 GA | | @wbc-ui/mermaid2 | Diagram-as-code rendering | 🟢 GA | | @wbc-ui/alert2 | Notification / toast system | 🟢 GA | | @wbc-ui/press2 | Markdown-driven docs engine (this package) | 🟢 GA |

📄 License

MIT © Wissem Boughamoura · wi-bg.com · wbc-ui.com