WBC-Routes2Dynamic Routing Engine for WBC-UI

Turn Vue Router into a content engine — render Markdown, HTML, JSON, files, and live Vue components straight from your route definitions. No extra .vue views, no build steps.

Get Started

Routing Basics

GitHub

📁 Route to Anything

Point a route at a .md, .pdf, .mp4, .png, or .json file and WBC renders it. File, URL, Markdown, and HTML sources all work out of the box.

🔗 Links & Dynamic Routes

Links inside your content create their own destination — a ./file.md auto-registers a route, a name navigates, a __defineRoute object mints a route on the fly. No trip back to the router file.

🧱 Arrays & Mixed Content

Describe a whole view as an ordered array — Markdown, HTML, Vuetify widgets, images, and logic in one declaration.

🧩 Metadata & SEO

Inject title, description, Open Graph, and Twitter cards from the route meta or the item itself, with a clear resolution priority.

🌐 Multilingual Routing

Map each route's content per locale — Markdown, components, and props all switch with the active language.

🔐 Encrypted Dynamic Props

Compress an entire view into a shareable link with lz-string and render it client-side — perfect for CMS previews and one-link dashboards.

⚙️ Integration Guide

Drop WBC-Routes2 into any Vue 2.7 + Vue Router app in a few lines. Built for documentation portals, dashboards, and learning platforms.

Why WBC-Routes2?

WBC-Routes2 is a content orchestration layer on top of Vue Router. Instead of declaring a .vue view per route, you describe what a route should render as data — and the single WBC component does the rest:

{
  path: "/guide",
  name: "GuideRoute",
  component: WBC,
  props: {
    item: "./docs/guide.md"   // Markdown, file, URL, JSON, HTML, or an array of them
  }
}

That one idea scales from a single Markdown page to multilingual, SEO-aware, encrypted dynamic views — all without extra build steps. Browse the sidebar for route sources, configuration, advanced features, and recipes.