wbRoutes2 Documentation

Appearance

🧩 Metadata in Vue Router Routes ​

WBC-Routes2 allows injecting metadata directly in the meta field of a Vue Router route. This enhances SEO, social sharing, and accessibility by defining structured information at the route level.

🔍 Why Inject Metadata via Routes? ​

  • Simplifies content-based routing and SEO setup
  • Avoids manual <head> management
  • Dynamically updates title, description, Open Graph, Twitter cards, etc.
  • Useful for CMS-like applications or documentation engines

🛠️ Example: Metadata in Route Definition ​

js
{
  path: "/wbc/intro",
  name: "WBCIntroPage",
  component: WBC,
  props: {
    item: "./docs/introduction.md"
  },
  meta: {
    comp: "meta",
    title: "Introduction to WBC-Routes2",
    description: "Discover WBC-Routes2 and how it redefines dynamic, multilingual routing in Vue.js apps.",
    keywords: ["WBC-Routes2", "Vue", "Markdown", "meta", "dynamic routing"],
    language: "en",
    viewport: "width=device-width, initial-scale=1.0",
    author: "Wissem Boughamoura",
    twitter: "@WBoughamoura",
    site: "http://wi-bg.com",
    "og:title": "Intro to WBC-Routes2",
    "og:description": "Discover how WBC-Routes2 enhances Vue apps with Markdown, Vue components, and SEO metadata.",
    "og:image": "http://wi-bg.com/assets/preview.png",
    "twitter:image": "http://wi-bg.com/assets/preview-twitter.png"
  }
}

🧠 Behavior and Priority ​

WBC-Routes2 resolves metadata using the following priority:

  1. ✅ Metadata defined inside the WBC item content (comp: meta)
  2. 🟡 Metadata defined inside the route’s meta field
  3. 🔴 Fallback defaults (e.g., global config in config.js or HTML template)

🌐 Multi-Language Meta via Route ​

Just like content, metadata can also be defined per language using language-specific keys.

js
{
  path: "/wbc/about",
  name: "WBCAboutMultilang",
  component: WBC,
  props: {
    item: {
      en: "./docs/about-en.md",
      fr: "./docs/about-fr.md"
    }
  },
  meta: {
    comp: "meta",
    title: {
      en: "About WBC",
      fr: "À propos de WBC"
    },
    description: {
      en: "What is WBC-Routes2? Learn about the plugin and ecosystem.",
      fr: "Qu’est-ce que WBC-Routes2 ? Découvrez le plugin et son écosystème."
    },
    keywords: ["Vue.js", "WBC", "metadata", "localization", "routes"]
  }
}

🔄 Real-Time Meta Switching (Experimental) ​

If your application supports runtime language switching (e.g. via vue-i18n), WBC-Routes2 can reactively update metadata by combining:

  • ``route.meta`
  • reactive WBC component scope
  • DOM <head> mutation utilities

Note: VuePress may cache some meta values. Use dynamic rendering only in SPA context.

📌 Use Cases ​

  • VuePress extensions
  • Static site generators
  • Developer documentation (like this!)
  • CMSs or headless frontends

🔚 Summary ​

Using metadata in route definitions helps decouple presentation from configuration. With WBC-Routes2:

  • Meta is declarative and centralized
  • Pages are better indexed and shared
  • Language-specific SEO is easy to manage
  • No need to manually tweak HTML head