@ygs07/prome-ui

ProMe UI

prome-ui is the shared Nuxt UI layer for ProMe micro frontends. It installs Nuxt UI, mounts Nuxt UI's UApp provider through PromeAppShell, injects the ProMe theme tokens, and registers reusable slot-first components.

Install In A Nuxt App

npm install ../prome-ui

Then add the module:

export default defineNuxtConfig({
  modules: ["prome-ui"],
});

The module registers components globally with the Prome prefix:

<script setup lang="ts">
const sidebarOpen = ref(true);
</script>

<template>
  <PromeAppShell sidebar-mode="component">
    <template #appbar>
      <PromeAppBar
        title="Football Sessions"
        :apps="[
          {
            key: 'football-sessions-manager',
            title: 'Football Sessions',
            icon: 'i-lucide-calendar-days',
            current: true
          }
        ]"
        app-switcher-badge="Apps"
      />
    </template>

    <template #sidebar>
      <PromeSidebar
        v-model:open="sidebarOpen"
        :workspace="{ label: 'ProMe Sessions', icon: 'i-lucide-calendar-days' }"
        :workspace-items="[
          [
            {
              label: 'ProMe Sessions',
              icon: 'i-lucide-calendar-days',
              to: '/dashboard'
            }
          ],
          [
            {
              label: 'Create session',
              icon: 'i-lucide-circle-plus',
              to: '/sessions/create'
            }
          ]
        ]"
        :items="[
          {
            label: 'Dashboard',
            icon: 'i-lucide-layout-dashboard',
            to: '/dashboard'
          }
        ]"
      />
    </template>

    <PromeHeroSection
      image-src="/images/football-bg-1.png"
      badge="Open sessions"
      title="Your game starts here"
    >
      Organize matchdays, invite players, and keep everyone on the same page.

      <template #actions>
        <PromeButton>Open session</PromeButton>
      </template>
    </PromeHeroSection>
  </PromeAppShell>
</template>

Module Options

export default defineNuxtConfig({
  modules: ["prome-ui"],
  promeUi: {
    prefix: "Prome",
    css: true,
    installNuxtUi: true,
    installNuxtIcon: true,
    primaryColor: "prome",
    nuxtUi: {
      fonts: false,
      colorMode: false,
    },
  },
});

Components

• PromeLogo
• PromeButton wraps Nuxt UI UButton
• PromeBadge wraps Nuxt UI UBadge
• PromeCard wraps Nuxt UI UCard
• PromePageHeader wraps Nuxt UI UPageHeader
• PromePopover wraps Nuxt UI UPopover
• PromeTabs wraps Nuxt UI UTabs
• PromeSelect wraps Nuxt UI USelect
• PromeCheckbox wraps Nuxt UI UCheckbox
• PromeCalendar wraps Nuxt UI UCalendar
• PromeInputTime wraps Nuxt UI UInputTime
• PromeAppShell
• PromeAppBar wraps Nuxt UI UDashboardNavbar and includes a UDashboardSearchButton
• PromeAppSwitcher
• PromeSidebar
• PromeHeroSection
• PromeImageFeature
• PromeWorkspaceCard
• PromeStatTile
• PromePlayerCard
• PromeEmptyState

Each component exposes slots so apps can bring their own forms, action buttons, menus, and app-specific content while keeping Nuxt UI behaviour plus shared ProMe spacing, colors, and layout defaults.

PromePlayerCard can also be imported directly in a Vue application that does not use Nuxt:

<script setup lang="ts">
import PlayerCard from '@ygs07/prome-ui/components/PlayerCard'
</script>