🧷 Metadata Inside WBC Item Prop

In WBC-Routes2, metadata can also be passed directly as part of the item prop. This technique enables dynamic metadata injection when:

• Loading content from multiple sources
• Working with arrays of WBC content
• Combining content blocks with metadata blocks

---

✨ Why Use Metadata in Item Prop?

• Inject metadata without touching Vue Router definition
• Enable dynamic SEO in CMS-like applications
• Combine structured content, files, and meta in one place
• Useful when routes are generated or abstracted

---

✅ Syntax

You simply include an object with comp: "meta" in the item array:

{
  path: "/wbc/mixed-content",
  name: "WBCMixedWithMeta",
  component: WBC,
  props: {
    item: [
      "<~ol>",
      "<li>",
      "WBC documentation site",
      "./docs/wbcRoutes2Doc/introductionWbr2/introductionWbr2.md",
      {
        comp: "meta",
        title: "Mixed Content with Metadata",
        description: "Explore how to embed metadata directly inside the WBC item array.",
        keywords: ["vue", "wbc-ui2", "metadata", "SEO", "dynamic routing"],
        language: "en",
        "og:image": "https://yourdomain.com/assets/mixed-preview.png"
      }
    ]
  }
}

---

🌍 Multi-Language Metadata Support

Just like Markdown and content blocks, metadata values can support multiple languages:

{
  comp: "meta",
  title: {
    en: "Dynamic SEO Example",
    fr: "Exemple de SEO Dynamique"
  },
  description: {
    en: "Metadata is now part of the item structure",
    fr: "Les métadonnées sont désormais intégrées à la structure des items"
  }
}

This works well with dynamic locale detection inside WBC.

---

🧠 Resolution Priority

When metadata is defined in multiple places, this is the resolution order:

1. ✅ Metadata inside the item (takes top priority)
2. 🟡 Metadata in Vue Router route meta field
3. 🔴 Fallback to VuePress or HTML defaults

This allows flexible overrides without losing control of global meta behavior.

---

🧪 Real-World Use Case

Imagine a Markdown file contains:

<!-- [[{
  comp: "meta",
  title: "Markdown-Defined Metadata",
  description: "This meta object was defined directly inside the content",
  keywords: ["meta", "content-defined", "vuepress"]
}]] -->

# Content Starts Here

...

You can include this .md file in your item array, and WBC will parse and inject the metadata into the head dynamically. This is especially useful for:

• External Markdown blogs
• Documentation imported from GitHub
• Developer portfolios

---

💡 Summary

Using comp: "meta" inside item is a powerful, flexible, and scalable way to control metadata without polluting routing logic.

• ✅ Supports multilingual values
• ✅ Respects existing routing hierarchy
• ✅ Works with arrays, objects, Markdown, JSON, etc.