🔐 Encrypted Dynamic Props with WBC-Routes2

With WBC-Routes2, you can pass encrypted or compressed content directly as a prop to your routes, making your Vue app capable of rendering dynamic views from secure, shareable links.

This allows features like:

• Embedding views in URLs
• Securely passing structured data
• Building route previews without server logic
• Creating CMS live preview or collaboration tools

---

🧠 How It Works

At runtime, WBC-Routes2 accepts a :item route param. This param is expected to be a compressed JSON string, representing any valid WBC structure.

It will automatically:

1. Decompress
2. Parse
3. Render with WBC component

---

📦 Install lz-string (recommended)

To compress and decompress your props:

npm install lz-string

Then in your router setup:

import { decompressFromEncodedURIComponent } from "lz-string";

const routes = [
  {
    path: "/wbc/encrypted/:item",
    name: "WBCEncrypted",
    component: WBC,
    props: route => ({
      item: JSON.parse(
        decompressFromEncodedURIComponent(route.params.item)
      )
    }),
  },
];

---

🧪 Example Payload

Here’s a sample WBC payload:

const myData = [
  "<~div|pa-5>",
  {
    comp: "VCard",
    options: {
      class: "red lighten-2 white--text pa-3",
      html: "This view was sent via encrypted props!"
    }
  },
  {
    comp: "meta",
    title: "Encrypted Props Example",
    description: "Rendered using WBC-Routes2 and compressed parameters.",
    language: "en"
  },
  "./docs/wbcRoutes2Doc/introductionWbr2/introductionWbr2.md"
];

Then compress:

import { compressToEncodedURIComponent } from "lz-string";

const encoded = compressToEncodedURIComponent(JSON.stringify(myData));
const link = `/wbc/encrypted/`{encoded}`;
console.log("🔗 Link to share:", link);

This link is a self-contained, live-rendering page.

---

🔄 Full Circle: From JSON to View

• WBC parses the object
• WBC renders components
• Meta data is injected
• Markdown file is fetched
• The view is live and reactive

No extra routing logic or view definitions are required.

---

⚙️ Encoded View URL Example

Sample compressed route URL (shortened for demo):

/wbc/encrypted/NoIgPA...X1sAI

This may represent:

• Vuetify cards
• Markdown documentation
• Styled alerts
• Meta tags

All parsed client-side.

---

📍 Dynamic Navigation with WBC

You can link to encrypted views programmatically:

this.`router.push({
  name: "WBCEncrypted",
  params: {
    item: compressToEncodedURIComponent(JSON.stringify(myData)),
  }
});

---

🚨 Tips for Security

• This method is great for previewing views, not protecting secrets
• Use encryption + compression if security is required
• Use signed JWT or AES if needed
• WBC expects plain JSON-compatible structure after decompression

---

✅ Use Cases

• CMS preview with live UI components
• Temporary preview environments for PRs
• Dynamic tutorial links (Markdown + live Vue)
• Form data previews without saving to DB
• Shareable interactive dashboards

---

🧩 Combined with Meta & Localization

You can pass multi-language or metadata inside the encrypted object:

{
  comp: "meta",
  title: {
    en: "Dynamic View",
    fr: "Vue Dynamique",
    ar: "عرض ديناميكي"
  },
  language: "auto"
}

---

📌 Summary

✅ WBC-Routes2 supports encrypted dynamic routing
✅ Use lz-string for compression
✅ Safe, fast, no server needed
✅ Supports markdown, components, metadata, and more
✅ Enables truly shareable Vue-powered links