wbRoutes2 Documentation

Appearance

⚖️ Route vs Component Metadata Priority in WBC-Routes2 ​

WBC-Routes2 allows metadata (like title, description, og:image, etc.) to be defined in two places:

  1. In the Vue Router via the meta field of a route definition.
  2. Inside the WBC component using a comp: 'meta' object.

This flexibility is useful, but what happens when both exist?

🔢 Priority Rules ​

The system evaluates metadata in the following order of priority:

✅ 1. WBC Component Meta (highest) ​

If item contains an object with comp: "meta", that metadata will override all others.

js
item: [
  { comp: "meta", title: "From Component", description: "Wins over route meta." }
]

✅ 2. Route Meta ​

If the WBC content doesn't define metadata, then the router-level meta field is used.

js
meta: {
  title: "From Router",
  description: "Used when WBC doesn't set meta."
}

✅ 3. Default SEO or fallback site meta ​

If neither is present, default tags defined in your VuePress or HTML head will be used.

🧪 Example: Both Sources Present ​

Let’s define both:

js
{
  path: "/meta-test",
  component: WBC,
  props: {
    item: [
      {
        comp: "meta",
        title: "Component Title",
        description: "Meta from WBC component."
      },
      "Welcome to the page!"
    ]
  },
  meta: {
    title: "Router Title",
    description: "Meta from route object."
  }
}

Result: The Component Title will be injected into the document head — because WBC wins.

🧩 Use Cases for Component Meta ​

  • 🔁 Multilingual Meta: Inside item you can define:
js
{
  comp: "meta",
  title: { en: "Welcome", fr: "Bienvenue", ar: "مرحبا" }
}

  • 📦 Dynamic Previews: If your WBC page is rendered dynamically from content files, the .md or .json file can include its own SEO metadata — no changes to routes.js needed.

  • 🧪 Testing Previews: Easily simulate social media or SEO behavior from test routes.

⚠️ Best Practice ​

Avoid defining both unless necessary. Keep your route meta as fallback and let content-specific pages control their metadata when relevant.

✅ Summary ​

  • ✅ WBC Component metadata takes precedence over route meta.
  • ✅ Route meta is used only when component metadata is missing.
  • ✅ You can mix multilingual meta, dynamic meta, and structured meta inside item.