« back to meridian

meridian · component library

2020-2025 · proprietary · ~70 components · vue 3 + composition api

Two parallel layers, plus the reactive primitives underneath. The Vue 3 single-file components are the canonical source; the custom elements are the compiled output, registered via defineCustomElement so any framework or no framework can consume them.

the three layers

vue source layer

Roughly 70 Vue 3 single-file components, the canonical source. Coverage spans forms, charts, modals, navigation, layouts, content, and media. Each component is a TypeScript setup script with a typed Props interface and TSDoc on every prop.

custom-elements layer

Roughly 60 custom elements, the compiled output. Each one wraps a Vue SFC via defineCustomElement and registers it with the global registry. Framework-agnostic consumers use these tags directly.

composables

Roughly a dozen reactive primitives the components compose with. Shadow-DOM-aware host bindings, slotted-descendant lookups, reactive attribute binding, viewport, resize, click-outside, DOM element handles by id, an HTTP request hook. Vue 3 Composition API throughout, no mixins.

patterns you'll see across the library

• TypeScript Props interfaces with TSDoc. Drives both the component API and the build-time IDE metadata generator. One source of truth for prop types, descriptions, and defaults. The same metadata feeds the MCP server downstream.
• Composables, not mixins. Vue 3 Composition API throughout. The reactive primitives, shadow-DOM-aware host bindings, slotted-descendant lookups, viewport, resize, click-outside, are factored into a small, testable composables layer that the components compose with.
• Shadow DOM-safe by default. Components ship with shadow DOM enabled; tokens propagate via CSS custom properties so theming pierces the boundary without the component needing to know.
• Cross-element reactive wiring. Composite components split responsibilities across multiple tags (panel, trigger, controller, indicator) with reactive attribute binding between them through the composables layer.
• Custom-element-aware directives. Click-outside and intersection observers handle both regular DOM and shadow DOM, using a single shared observer with a WeakMap of callbacks. Same pattern as Anchor; refined for Vue 3.

Back to Meridian overview · Compare to Anchor components