🎯 Route Props in WBC-Routes2

One of the most powerful features of WBC-Routes2 is the ability to pass any kind of prop to the WBC component within a route. This includes strings, arrays, objects, Markdown, HTML, Vue components, even dynamically encrypted props.

---

✅ Basic String as item Prop

You can pass raw Markdown or HTML directly as a prop to WBC.

{
  path: "/simple",
  name: "SimpleRoute",
  component: WBC,
  props: {
    item: "## 🧪 Hello from Markdown!"
  }
}

---

📄 Loading Markdown File

Pass a relative path to a .md file (available in public or build root):

{
  path: "/doc",
  name: "DocPage",
  component: WBC,
  props: {
    item: "./md/docs/guide.md"
  }
}

---

📚 Array of Props

If you want to render multiple components or Markdown sections, you can use an array of props:

{
  path: "/array-content",
  name: "ArrayRoute",
  component: WBC,
  props: {
    item: [
      "MD__## Section A",
      "<div class='info'>Some HTML</div>",
      "./md/docs/chapter1.md"
    ]
  }
}

---

🧩 Full WBC Object as Prop

You can pass an object to fully configure the WBC rendering behavior:

{
  path: "/object",
  name: "ObjectRoute",
  component: WBC,
  props: {
    item: {
      comp: "MD",
      options: {
        class: "pa-4 teal lighten-5",
        html: "# 🧠 Dynamic from Object"
      }
    }
  }
}

---

🌍 Multilingual Props

WBC-Routes2 supports multilingual content out-of-the-box. Just provide an object keyed by language codes:

{
  path: "/multilang",
  name: "MultilangRoute",
  component: WBC,
  props: {
    item: {
      en: "## Hello",
      fr: "## Bonjour",
      ar: "## مرحبا"
    }
  }
}

If your app uses i18n, the right language version will be picked automatically.

---

🧠 Combining Mixed Content

You can mix file paths, inline Markdown, WBC objects, and Vue components:

{
  path: "/mixed",
  name: "MixedProps",
  component: WBC,
  props: {
    item: [
      "<~VContainer|pa-5 grey>",
      {
        comp: "VCard",
        options: {
          class: "pa-3",
          html: "🚀 Mixed content inside a card"
        }
      },
      "MD__### Inline Markdown",
      "./md/docs/summary.md"
    ]
  }
}

---

🛡️ Prop Validation (Optional)

Although Vue Router itself doesn’t enforce prop types, you can add basic validation via Vue's props config inside the WBC component or wrapper layout.

---

🔍 Summary

Type	Supported	Notes
Raw Text	✅	Markdown or HTML
Markdown File	✅	Relative path
Object with comp/options	✅	Full dynamic rendering
Multilingual Object	✅	i18n-aware
Array of Mixed Content	✅	Combine any format
JSON or Config Blocks	✅	Advanced, requires correct structure