# Table of contents Mono-repo orchestration + Lit web components for the Vue ecosystem. ## Recommended reading order (for AI) Read these first, in order: 1. [Template Rules (for AI)](https://mono-libs.pages.dev/ai/template.md): This project is built to be maintained largely by an AI assistant. This page is the contract the AI follows when it writes code in a Host or a Remote. An app is written in one of the ecosystem's template languages — Vue or Nuxt — declared by the type field in its mono.config.ts, and part of these r… 2. [Reference LLMs (for AI)](https://mono-libs.pages.dev/ai/ref-llms.md): When you (an AI assistant) need authoritative API details for any library in this stack, read that project's official llms-full.txt first instead of relying on memory. An llms-full.txt is the project's full documentation flattened into a single machine-readable markdown file, so it is the most reli… 3. [Getting Started](https://mono-libs.pages.dev/repo/getting-started.md): Mono-repo is a way to build a large-scale, modular front-end on top of the Vue ecosystem. The goal is a maintainable, clean, complex project that takes minimum effort to grow. 4. [Setup](https://mono-libs.pages.dev/repo/setup.md): The mono ecosystem has two roles: a Host and one or more Remotes (see Getting Started). The Host owns the shared shell. A Remote adds its own pages and plugs into it. 5. [Config](https://mono-libs.pages.dev/repo/config.md): The mono-repo also comes with a config file that handles cookies, JWT state, and deployment. 6. [Environment](https://mono-libs.pages.dev/repo/env.md): Each app keeps its own environment variables. mono-env is a small wrapper (shipped with mono-utils) that loads a root env file first, then layers each app's env file from .mono/apps/ on top, and finally runs your real command (vite, vue-tsc, …) with the merged environment. 7. [Data Fetching](https://mono-libs.pages.dev/repo/data-fetching.md): To set up fetching, you need three things: a base URL, a token, and the fetch function. Mono ships with all of them. 8. [DataSource](https://mono-libs.pages.dev/repo/datasource.md): A DataSource is a live, reactive handle to a remote OData endpoint that mono's table, select and dropdown-table components consume — it loads rows on demand (one page at a time), exposes paging, filtering and sorting, and re-renders the bound component whenever its data changes. 9. [Resolvers](https://mono-libs.pages.dev/repo/resolvers.md): A resolver is a host-side stopgap fix. When a remote app has a bug or isn't ready yet and it breaks the host, the host doesn't wait for the upstream fix — it drops a small file in a resolvers/ folder, wires it in, and deletes it once the remote is fixed upstream. Resolvers live only in the host; th… 10. [Template Changelog](https://mono-libs.pages.dev/repo/template-changelog.md): Changes to the starter templates, grouped by change. Each shows the commit and the exact lines to remove (red) / add (green). 11. [Getting started](https://mono-libs.pages.dev/ui/getting-started.md): Mono UI is a small set of Lit-powered web components — , , , etc. They're standard custom elements, so they work in Vue, React, Svelte, plain HTML, or anywhere custom elements run. 12. [Theme](https://mono-libs.pages.dev/ui/theme.md): mono-helper's look is driven by two independent axes you can mix freely — the theme (structure: radius, typography, elevation, component shapes) and the theme color (the brand + status palette). 13. [DOM Type — Light vs Shadow](https://mono-libs.pages.dev/ui/dom-type.md): Every mono-* component ships in two flavors: a light-DOM build and a shadow-DOM build. Most of the time you don't think about it — you just import a component and use it. This page explains the difference in plain terms and which one to pick. 14. [Skills (for AI)](https://mono-libs.pages.dev/ai/skills.md): MONO apps live in separate repositories, so they can't see what the others have learned. MONO Skills is the shared brain that fixes that: a single private repo holding, per app, its knowledge, reusable skills, technical decisions, and the Claude session history — so any app (and any future session)… 15. [Prompting Guide](https://mono-libs.pages.dev/ai/prompting.md): This project is built to be driven by an AI assistant (Claude). How well that goes depends almost entirely on how you prompt it. A vague ask ("add budgeting") sends the assistant guessing; a precise one ("in @src/stores/use-budget.ts, add a transferToProject() action that…") gets you the right chan… ## LLMs links - [home](https://mono-libs.pages.dev/index.md): A small toolkit that combines a Host/Remote mono-repo pattern with Lit-powered web components — build large, modular Vue front-ends without rebuilding the same generic pieces every time. ### Mono-Repo - [Getting Started](https://mono-libs.pages.dev/repo/getting-started.md) [read #3]: Mono-repo is a way to build a large-scale, modular front-end on top of the Vue ecosystem. The goal is a maintainable, clean, complex project that takes minimum effort to grow. - [Setup](https://mono-libs.pages.dev/repo/setup.md) [read #4]: The mono ecosystem has two roles: a Host and one or more Remotes (see Getting Started). The Host owns the shared shell. A Remote adds its own pages and plugs into it. - [Config](https://mono-libs.pages.dev/repo/config.md) [read #5]: The mono-repo also comes with a config file that handles cookies, JWT state, and deployment. - [Useful Utils](https://mono-libs.pages.dev/repo/useful-utils.md): mono-utils bundles the small, fiddly helpers you'd otherwise rewrite on every screen — form validation, notifications, list add/update/remove, OData filters, JSON parsing — into one place, tested and consistent. They're exposed through useMonoUtility (imported from mono-utils/runtime), so you impor… - [Sync](https://mono-libs.pages.dev/repo/sync.md): Since the Host and Remote live in separate repositories, there is a small helper library called mono-utils that handles syncing between them. - [Mono CLI](https://mono-libs.pages.dev/repo/mono-cli.md): How mono-cli installs the private mono libraries without spending a GitHub token, and why it is not stable enough to adopt yet. - [Environment](https://mono-libs.pages.dev/repo/env.md) [read #6]: Each app keeps its own environment variables. mono-env is a small wrapper (shipped with mono-utils) that loads a root env file first, then layers each app's env file from .mono/apps/ on top, and finally runs your real command (vite, vue-tsc, …) with the merged environment. - [Data Fetching](https://mono-libs.pages.dev/repo/data-fetching.md) [read #7]: To set up fetching, you need three things: a base URL, a token, and the fetch function. Mono ships with all of them. - [DataSource](https://mono-libs.pages.dev/repo/datasource.md) [read #8]: A DataSource is a live, reactive handle to a remote OData endpoint that mono's table, select and dropdown-table components consume — it loads rows on demand (one page at a time), exposes paging, filtering and sorting, and re-renders the bound component whenever its data changes. - [OData Types](https://mono-libs.pages.dev/repo/odata-types.md): Every OData service publishes a $metadata document describing all of its entities and their fields. Instead of hand-writing TypeScript interfaces for those entities (tedious, and they drift out of sync with the backend), you generate them from $metadata with odata2ts. - [Mock API](https://mono-libs.pages.dev/repo/mock-api.md): Sometimes the backend isn't ready, or you want a demo that anyone can click through without a server behind it. Mono ships a mock backend that lives in the browser's IndexedDB. You declare a schema in mono.config.ts, and every fetching call whose URL matches that schema is answered locally — the re… - [Provide and Inject](https://mono-libs.pages.dev/repo/provide-inject.md): You can communicate between Remote and Host, or Host and Remote, using the provide-and-inject concept. It can send a string, number, object, or array — and it stays reactive. - [Resolvers](https://mono-libs.pages.dev/repo/resolvers.md) [read #9]: A resolver is a host-side stopgap fix. When a remote app has a bug or isn't ready yet and it breaks the host, the host doesn't wait for the upstream fix — it drops a small file in a resolvers/ folder, wires it in, and deletes it once the remote is fixed upstream. Resolvers live only in the host; th… - [Template Changelog](https://mono-libs.pages.dev/repo/template-changelog.md) [read #10]: Changes to the starter templates, grouped by change. Each shows the commit and the exact lines to remove (red) / add (green). ### Mono-AI - [Prompting Guide](https://mono-libs.pages.dev/ai/prompting.md) [read #15]: This project is built to be driven by an AI assistant (Claude). How well that goes depends almost entirely on how you prompt it. A vague ask ("add budgeting") sends the assistant guessing; a precise one ("in @src/stores/use-budget.ts, add a transferToProject() action that…") gets you the right chan… - [Template Rules (for AI)](https://mono-libs.pages.dev/ai/template.md) [read #1]: This project is built to be maintained largely by an AI assistant. This page is the contract the AI follows when it writes code in a Host or a Remote. An app is written in one of the ecosystem's template languages — Vue or Nuxt — declared by the type field in its mono.config.ts, and part of these r… - [Reference LLMs (for AI)](https://mono-libs.pages.dev/ai/ref-llms.md) [read #2]: When you (an AI assistant) need authoritative API details for any library in this stack, read that project's official llms-full.txt first instead of relying on memory. An llms-full.txt is the project's full documentation flattened into a single machine-readable markdown file, so it is the most reli… - [Skills (for AI)](https://mono-libs.pages.dev/ai/skills.md) [read #14]: MONO apps live in separate repositories, so they can't see what the others have learned. MONO Skills is the shared brain that fixes that: a single private repo holding, per app, its knowledge, reusable skills, technical decisions, and the Claude session history — so any app (and any future session)… ### Mono-Addons - [Chart.js](https://mono-libs.pages.dev/addons/chart.md): Charts built on Chart.js. A controlMonoChart(...) controller projects your rows into chart data — the same controller-plus-.prop shape as controlMonoTable — and the elements own the canvas. - [Export Table](https://mono-libs.pages.dev/addons/table-export.md): Turn a controlMonoTable into a document with table.export(). The report layout is authored as a Markdown file — Handlebars fills it from your data, Jexl evaluates inline expressions, and the result renders to Markdown (for preview) or to a real .xlsx workbook with styles, formulas and merged cells.… - [Import Table](https://mono-libs.pages.dev/addons/table-import.md): Read an edited spreadsheet back into the grid with table.import(). Each sheet row is paired with a table row by composite key, the declared columns are parsed and compared, and the differences land in the grid's staged changes — shown optimistically, reviewable, and written to your data only when y… - [Notivue](https://mono-libs.pages.dev/addons/notivue.md): Toast notifications for the template apps, built on notivue. You don't call notivue directly — you push through notif() (from useMonoUtility) and render with the MonoNotivue component. It's an optional dependency: skip it if an app doesn't need notifications. - [Yup](https://mono-libs.pages.dev/addons/yup.md): Schema-based form validation, built on Yup. You don't call Yup's .validate() yourself — you build a schema, keep an error object, and run it through the validation helpers from useMonoUtility (validateAllSchema, validateSchema, validateAllSchemaCheck, clearSchemaValidation). Yup is an optional depe… ### Mono-UI - [Getting started](https://mono-libs.pages.dev/ui/getting-started.md) [read #11]: Mono UI is a small set of Lit-powered web components — , , , etc. They're standard custom elements, so they work in Vue, React, Svelte, plain HTML, or anywhere custom elements run. - [Theme](https://mono-libs.pages.dev/ui/theme.md) [read #12]: mono-helper's look is driven by two independent axes you can mix freely — the theme (structure: radius, typography, elevation, component shapes) and the theme color (the brand + status palette). - [DOM Type — Light vs Shadow](https://mono-libs.pages.dev/ui/dom-type.md) [read #13]: Every mono-* component ships in two flavors: a light-DOM build and a shadow-DOM build. Most of the time you don't think about it — you just import a component and use it. This page explains the difference in plain terms and which one to pick. - [Form](https://mono-libs.pages.dev/ui/form.md): A headless form controller — there is no mono-form element. You author a native
and place controls wherever you like; controlMonoForm owns the value, the validation, the cross-field reactions and the props pushed onto each control. - [Checkbox](https://mono-libs.pages.dev/ui/checkbox.md): A control for boolean / multi-state selection. Toggle Vue / CSS to switch the live demo and source together. - [Radio](https://mono-libs.pages.dev/ui/radio.md): A single radio option used standalone or as part of a group sharing the same model-value. Sizes, color variants, optional description, and slot-overridable label and description text. Toggle Vue / CSS to switch the live demo and source together. - [Switch](https://mono-libs.pages.dev/ui/switch.md): A boolean toggle with sizes, color variants, optional loading state, and slot-overridable label and description text. Toggle Vue / CSS to switch the live demo and source together. - [Input](https://mono-libs.pages.dev/ui/input.md): A single-line text input with sizes, color and visual variants, validation states, prefix/suffix slots and a clearable button. Toggle Vue / CSS to switch the live demo and source together. - [Date](https://mono-libs.pages.dev/ui/date.md): A rich date / datetime / time picker built on flatpickr. Set type to date (default), datetime, or time. The common flatpickr options are exposed as named props, and the options prop passes through any other flatpickr option — so the picker is completely featured. - [Textarea](https://mono-libs.pages.dev/ui/textarea.md): A multi-line text input with sizes, color and visual variants, validation states, slot-overridable label and helper, JS-driven auto-resize, and an optional character counter. Toggle Vue / CSS to switch the live demo and source together. - [Select](https://mono-libs.pages.dev/ui/select.md): A dropdown picker built on a custom button + listbox UI. Sizes, color and visual variants, validation states, slot-overridable label/helper/prefix/suffix, and a clearable trigger. Toggle Vue / CSS to switch the live demo and source together. - [File upload](https://mono-libs.pages.dev/ui/file-upload.md): A drag-and-drop file uploader with previews, validation states and a built-in file list. Toggle Vue / CSS to switch the live demo and source together. - [Tag input](https://mono-libs.pages.dev/ui/tag-input.md): A multi-value tag entry with optional autocomplete suggestions, validation states, max-tags limit, and slot-overridable label/helper. Tags are added with Enter, , or Tab, and removed with × or Backspace on an empty input. Toggle Vue / CSS to switch the live demo and source together. - [Button](https://mono-libs.pages.dev/ui/button.md): A clickable button or link element. Toggle Vue / CSS to switch the live demo and source together. - [Button dropdown](https://mono-libs.pages.dev/ui/button-dropdown.md): A row of actions that stays flat while it's short and collapses behind a ⋮ menu once it isn't. — button plus dropdown in one element. - [Chip](https://mono-libs.pages.dev/ui/chip.md): A small status or label chip. Slot any content inside — text, count, icon. Toggle Vue / CSS to switch the live demo and source together. - [Card](https://mono-libs.pages.dev/ui/card.md): A surface for grouping related content with optional header and footer actions. Toggle Vue / CSS to switch the live demo and source together. - [Table](https://mono-libs.pages.dev/ui/table.md): A headless, native- helper. controlMonoTable wraps a DataSource or a plain array and small controls (, , , …) drive it — bind each with :control-table. Declare every control's props in the controller's props block and each element needs… - [Dropdown table](https://mono-libs.pages.dev/ui/dropdown-table.md): A dropdown that opens a native
for picking row(s). controlMonoDataDropdown wraps controlMonoTable (exposed as dd.grid), so the panel's table controls bind with :control-table.prop="dd.grid". Bind the field with :control-data-dropdown.prop="dd". - [Filter builder](https://mono-libs.pages.dev/ui/filter.md): A universal, inline OData filter builder. controlMonoFilterBuilder owns the filter; renders it as nested rule rows and writes edits straight back. - [Accordion](https://mono-libs.pages.dev/ui/accordion.md): A single expand/collapse unit with header (icon + title + optional description + optional trailing actions) and a body. Compose multiple together for a typical FAQ or settings group. Toggle Vue / CSS to switch the live demo and source together. - [Tabs](https://mono-libs.pages.dev/ui/tabs.md): A horizontal tab strip with sizes, color variants, three visual styles (underline / pill / ghost), optional count badges, optional SVG icons via slot, and per-item disabled state. Content panes live outside the strip — drive them off the bound model-value. Toggle Vue / CSS to switch the live demo a… - [Drawer](https://mono-libs.pages.dev/ui/drawer.md): A side-anchored overlay panel that slides in from any of the four edges. Use it for detail views, filter panels, or contextual forms that don't deserve a full route. Bind open (or use the model-value alias) to control visibility, listen to mno-toggle for state changes, and pick the slide direction… - [Dropdown](https://mono-libs.pages.dev/ui/dropdown.md): A flexible floating overlay that pairs any activator (slot="main") with any body content (slot="body"). Twelve placements (top/bottom/left/right × bare, -start, -end), three trigger modes (click / hover / manual), six theme colours, sm/md/lg sizes. The panel auto-flips to the opposite side when the… - [Modal](https://mono-libs.pages.dev/ui/modal.md): A centered overlay dialog with header / title / body / footer slots, six content sizes, six theme colours, and a modelValue binding contract that matches drawer / popover / toast. Renders into a body portal to escape transformed ancestors and stays fully invisible while closed (no shadow halo bleed… - [Nav](https://mono-libs.pages.dev/ui/nav.md): A sticky top app bar built around three named slots — start, default (center), and end — plus an optional extension second row. Three densities (compact / comfortable / default), three variants (flat / elevated / outlined), and seven colors (six themed + surface for the white-with-themed-border def… - [Sidebar](https://mono-libs.pages.dev/ui/sidebar.md): A Vuetify-style navigation drawer with four modes — permanent (always visible, pushes content), temporary (overlay drawer with scrim + Escape), rail (mini collapsed, optional expandOnHover), and auto (responsive: permanent on ≥ 768 px viewports, temporary below). Anchors left or right, three densit… - [Menu](https://mono-libs.pages.dev/ui/menu.md): A recursive nav list — items, collapsible groups, dividers, and subheaders — driven by a single items array. Single or multi-select, three densities, seven colors (six themed + surface), two style variants (nav for the dashboard-pill look, plain for a softer subtle fill), badges with status colors,… - [Breadcrumb](https://mono-libs.pages.dev/ui/breadcrumb.md): A wayfinding component for page hierarchies — pair it with a page header above the title and subtitle. Items render as when they include href, as