The latest articles on DEV Community by suhaib mousa (@suhaib-mousa). https://dev.to/suhaib-mousa https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2130118%2F9e8e0e2b-6227-49b1-95bd-794ad26d3d62.jpg https://dev.to/suhaib-mousa en suhaib mousa Thu, 26 Sep 2024 13:06:42 +0000 https://dev.to/suhaib-mousa/seeking-advice-on-dynamic-ui-rendering-with-vuejs-for-a-customizable-frontend-12c8 https://dev.to/suhaib-mousa/seeking-advice-on-dynamic-ui-rendering-with-vuejs-for-a-customizable-frontend-12c8 <p>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!</p> <h2> Project Requirements: </h2> <ol> <li>I'm building an application that needs a mechanism to create and render a dynamic frontend.</li> <li>The backend is built with ABP.io (supports Multi-Tenancy).</li> <li>The plan is to have pre-defined templates for frontend components.</li> <li>Tenants will be able to select components and insert data (static or from a data source).</li> <li>The user's customization will be stored as a JSON object in the database, containing template type and styles.</li> <li>When a page is requested, the JSON object needs to be translated into HTML alongside the pre-defined templates.</li> </ol> <p>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.</p> <h2> My questions are: </h2> <ol> <li>Has anyone implemented a similar dynamic rendering system? If so, what approach did you take?</li> <li>Which Vue.js component library would you recommend for this kind of customizable, JSON-driven UI?</li> <li>Are there any specific design patterns or architectural approaches you'd suggest for managing this level of frontend flexibility?</li> <li>How would you handle the translation of JSON configurations to actual rendered components efficiently?</li> <li>Are there any potential pitfalls or performance considerations I should be aware of with this approach?</li> </ol> <h2> Additional Context: </h2> <ul> <li>The application needs to support multi-tenancy (ABP.io backend)</li> <li>Performance and scalability are important considerations</li> <li>We're looking for a balance between flexibility for tenants and maintainability of the codebase</li> </ul> <p>Any insights, experiences, or recommendations would be greatly appreciated. Thanks in advance for your help!</p> vue frontend webdev multitenancy