@fonderie/vue-workspaces-screens

@fonderie/vue-workspaces-screens

Pre-built Vue 3 workspaces screens — TeamMembersScreen and InviteMembersScreen — built on @fonderie/vue-workspaces composables. Plain HTML elements via Vue's h() render function, inline styles you can override, zero UI library dependency.

Install

npm install @fonderie/vue-workspaces-screens

Use

<script setup>
import { FonderieClient } from '@fonderie/client';
import { TeamMembersScreen, InviteMembersScreen } from '@fonderie/vue-workspaces-screens';

const client = new FonderieClient({ baseUrl: 'https://api.example.com/v1' });
const currentUserId = 'user_123';
</script>

<template>
  <TeamMembersScreen
    :client="client.workspaces"
    :current-user-id="currentUserId"
    @navigate-invite="route = 'invite'"
  />
  <InviteMembersScreen :client="client.workspaces" @navigate-members="route = 'team'" />
</template>

TeamMembersScreen lists members with their role and a remove button (hidden for the signed-in user themselves). InviteMembersScreen has an email input to send an invite and a list of pending invitations with a cancel button on each. Need just the state management without the markup? Use @fonderie/vue-workspaces's composables directly.

Why this exists

You've shipped this plumbing before — auth, teams, billing, messaging — and the next project will ask for it again. Fonderie packages it once: plain TypeScript modules for @fonderie/core, PostgreSQL-backed, self-hosted, MIT. No external control plane, no per-seat anything. Register the modules you need; skip the ones you don't.

This package owns pre-built Vue workspaces UI, so you don't have to build a team-management page from scratch. Swap it for your own design system whenever you outgrow it — @fonderie/vue-workspaces's composables work standalone.

Browse the whole set at fonderiejs/fonderie · follow @fonderiejs

License

MIT © Fonderie, Inc.