DEV Community

Cover image for Seeking advice on dynamic UI rendering with Vue.js for a customizable frontend
suhaib mousa
suhaib mousa

Posted on

Seeking advice on dynamic UI rendering with Vue.js for a customizable frontend

Hi DEV community! I'm working on a project that requires a highly customizable frontend, and I'm looking for advice on the best approach. I'd really appreciate any insights or experiences you can share!

Project Requirements:

  1. I'm building an application that needs a mechanism to create and render a dynamic frontend.
  2. The backend is built with ABP.io (supports Multi-Tenancy).
  3. The plan is to have pre-defined templates for frontend components.
  4. Tenants will be able to select components and insert data (static or from a data source).
  5. The user's customization will be stored as a JSON object in the database, containing template type and styles.
  6. When a page is requested, the JSON object needs to be translated into HTML alongside the pre-defined templates.

I'm considering using Vue.js for the frontend, possibly with a component library like PrimeVue, Vuetify, or Element UI. However, I'm open to other suggestions that might fit this use case better.

My questions are:

  1. Has anyone implemented a similar dynamic rendering system? If so, what approach did you take?
  2. Which Vue.js component library would you recommend for this kind of customizable, JSON-driven UI?
  3. Are there any specific design patterns or architectural approaches you'd suggest for managing this level of frontend flexibility?
  4. How would you handle the translation of JSON configurations to actual rendered components efficiently?
  5. Are there any potential pitfalls or performance considerations I should be aware of with this approach?

Additional Context:

  • The application needs to support multi-tenancy (ABP.io backend)
  • Performance and scalability are important considerations
  • We're looking for a balance between flexibility for tenants and maintainability of the codebase

Any insights, experiences, or recommendations would be greatly appreciated. Thanks in advance for your help!

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (1)

Collapse
 
agokuzeusa profile image
Goku Zeas

By delivering up-to-date information on the reasons behind these fines and any recent changes in the associated laws, Dubai Fines ensures that users remain well-informed and compliant with local regulations.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay