pgo-uiux

Reusable Vue 3 components and theming for PGO apps. Ships a plugin that:

• Registers all components under src/components/pgo/** globally (except Timeline.vue).
• Installs an SSR-safe theme plugin (CSS variables, prefix --vts-).
• Auto-injects a default AppBar + NavDrawer and a dv/en language toggle (persists to localStorage).
• Auto-loads baseline CSS (tokens.css) and Faruma font.

Install

npm install pgo-uiux

Quick start

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import PgoUIUX from 'pgo-uiux'

createApp(App)
  .use(PgoUIUX, {
    theme: { enable: true },
    layout: { enable: true }, // Auto AppBar + NavDrawer
    lang: { enable: true, default: 'en' },
    autoRegister: { exclude: ['Timeline.vue'] } // default
  })
  .mount('#app')

Per-component import (tree-shakeable):

import { Timeline } from 'pgo-uiux'

Theming

• CSS variables with prefix --vts- are applied to document.documentElement.
• Variants: light, dark, system.
• Subpath exports: import { createThemePlugin } from 'pgo-uiux/plugin' and import { themes } from 'pgo-uiux/themes'.

Language (dv/en)

• Minimal internal store toggles lang and sets dir (en→ltr, dv→rtl).
• Persists to localStorage under pgo:lang.

Tailwind v4+

• Tokens are standard CSS variables; use var(--vts-color-primary) etc. No Tailwind plugin required.

Fonts

• Includes Faruma.ttf via @font-face. Confirmed license permits redistribution.

Build locally

npm run build

Notes

• Only dist/ is published. Example/demo files are not included in the package.