🌐 Multilingual Routing

WBC-Routes2 makes internationalization painless and elegant by directly supporting multilingual content inside routing definitions.

You can define your route content per language, and WBC will intelligently render the correct one based on your app’s current `i18n.locale or custom logic.

---

🧠 Why This Matters

Multilingual routing helps:

• Provide a better user experience.
• Boost SEO for localized content.
• Maintain clarity between different content versions.
• Avoid duplicated route logic or nested layouts.

---

🚀 Language-Aware Markdown Routing

WBC lets you associate a route path with multiple content sources (e.g., markdown files or components) for different languages.

Example: Route Based on Current Language

{
  path: "/docs/start",
  name: "LocalizedStartDocs",
  component: WBC,
  props: {
    item: {
      en: "./docs/start-en.md",
      fr: "./docs/start-fr.md",
      ar: "./docs/start-ar.md",
      de: "./docs/start-de.md"
    }
  }
}

If the current language is fr, then the file start-fr.md` is rendered.

---

💬 Language-Specific Markdown Strings

You can also use inline markdown blocks mapped to languages.

{
  path: "/hello-world",
  name: "HelloWorldMultilang",
  component: WBC,
  props: {
    item: {
      en: "MD__## Hello World 🌍",
      fr: "MD__## Bonjour le monde 🌍",
      ar: "MD__## مرحبًا بالعالم 🌍"
    }
  }
}

---

🧩 Multilingual Components and Props

WBC supports deep multilingual objects — you can assign different values for each language inside component props.

Example: VCard with localized content

{
  path: "/intro/card",
  name: "LocalizedCard",
  component: WBC,
  props: {
    item: {
      comp: "VCard",
      options: {
        class: "ma-5 pa-5",
        html: {
          en: "Welcome to the English version.",
          fr: "Bienvenue à la version française.",
          ar: "مرحبًا بك في النسخة العربية."
        }
      }
    }
  }
}

---

🌍 Nested Multilingual Arrays

WBC-Routes2 also supports arrays where each element can be multilingual.

{
  path: "/intro/mixed",
  name: "MixedLocalizedRoute",
  component: WBC,
  props: {
    item: [
      {
        en: "MD__## Hello!",
        fr: "MD__## Salut !",
        ar: "MD__## أهلاً!"
      },
      {
        en: "./files/intro-en.md",
        fr: "./files/intro-fr.md"
      },
      {
        comp: "VAlert",
        options: {
          type: "info",
          html: {
            en: "This alert is localized.",
            fr: "Cette alerte est localisée.",
            ar: "هذا التنبيه مترجم."
          }
        }
      }
    ]
  }
}

---

🔁 Runtime Language Switching

If you integrate vue-i18n, WBC-Routes2 will automatically react to `i18n.locale changes.

// Switch language dynamically
this.`i18n.locale = 'fr'

The displayed route content updates immediately.

---

📥 External JSON or JS Language Mapping

You can also load multilingual route content from JSON files:

File: ./routes/langContent.js

export default {
  en: [
    "MD__## Welcome EN",
    "./files/doc-en.md"
  ],
  fr: [
    "MD__## Bienvenue FR",
    "./files/doc-fr.md"
  ]
};

Route Config:

{
  path: "/localized/content",
  name: "ExternalLangRoute",
  component: WBC,
  props: {
    item: () => import("./routes/langContent.js").then(mod => mod.default)
  }
}

---

✍️ Example with Markdown + Meta + Vue

{
  path: "/intro/mixed-meta",
  name: "LocalizedWithMeta",
  component: WBC,
  props: {
    item: [
      {
        en: "./docs/intro-en.md",
        fr: "./docs/intro-fr.md"
      },
      {
        comp: "meta",
        title: {
          en: "WBC in English",
          fr: "WBC en Français"
        },
        description: {
          en: "Explore WBC-Routes2 with localized documentation",
          fr: "Explorez WBC-Routes2 avec une documentation localisée"
        },
        keywords: ["vue", "wbc", "routes", "i18n", "multilang"]
      }
    ]
  }
}

This example renders a localized markdown document and injects localized metadata for SEO and sharing.

---

🔚 Summary

WBC-Routes2 simplifies multi-language routing by:

• Supporting per-language `item mapping
• Allowing deep localization inside components
• Automatically syncing with vue-i18n or other reactive locales
• Simplifying SEO metadata management across languages