Separating role-based UIs in the same app

dear internet,

we’re building a medium sized business application on vue - so far it has been a pleasure -, but we’re stuck on the decision on how to separate/structure our code into different clients/uis: we got 4 user groups/roles accessing the same api(s) via the same services, they will share components (e. g. calendars, tables, buttons etc.) while requiring pretty much distinct interfaces. we’re somehow uncomfortable with both a monolithic routes.js containing everything with role-based redirects and dynamic role-based component rendering. however, using different .html / vue bootstrap entry points doesn’t feel very dry-ish. highly appreciate any advice on this.

thank you! cheers from berlin

Conceptually, you would have a single component for a particular route. Within that component you would serve up a different interface component that is specific to the user’s roles. Within that specific user interface you could then reuse the shared components.

Pseudo code might look like this, where you have a single admin route and then userRole determines which admin view to load.

/admin - Admin.vue

<template>
    <div id="admin">
        <component v-bind:is="userRole"></component>
    </div>
</template>
2 Likes