{"id":43772419,"url":"https://github.com/TODOvue/tv-ui","last_synced_at":"2026-02-19T23:01:07.807Z","repository":{"id":334915574,"uuid":"1140830822","full_name":"TODOvue/tv-ui","owner":"TODOvue","description":"UI component library for TODOvue application","archived":false,"fork":false,"pushed_at":"2026-01-30T22:54:59.000Z","size":524,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-31T14:35:36.851Z","etag":null,"topics":["todovue","ui","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://ui.todovue.blog","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TODOvue.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-23T20:15:50.000Z","updated_at":"2026-01-30T22:54:24.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/TODOvue/tv-ui","commit_stats":null,"previous_names":["todovue/tv-ui"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/TODOvue/tv-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TODOvue%2Ftv-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TODOvue%2Ftv-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TODOvue%2Ftv-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TODOvue%2Ftv-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TODOvue","download_url":"https://codeload.github.com/TODOvue/tv-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TODOvue%2Ftv-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29636035,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-19T22:32:43.237Z","status":"ssl_error","status_checked_at":"2026-02-19T22:32:38.330Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["todovue","ui","vue","vuejs"],"created_at":"2026-02-05T17:00:21.067Z","updated_at":"2026-02-19T23:01:07.801Z","avatar_url":"https://github.com/TODOvue.png","language":"JavaScript","funding_links":[],"categories":["Components \u0026 Libraries"],"sub_categories":["Frameworks"],"readme":"\u003cp align=\"center\"\u003e\u003cimg width=\"150\" src=\"https://res.cloudinary.com/dcdfhi8qz/image/upload/v1763663056/uqqtkgp1lg3xdplutpga.png\" alt=\"TODOvue logo\"\u003e\n\u003c/p\u003e\n\n# TODOvue UI (TvUi)\nAn **umbrella** package for Vue 3 that installs and re-exports the official `@todovue/*` components.\n\n\u003e Important: **this is NOT a monorepo**. `@todovue/tv-ui` is a library that declares dependencies on each `@todovue/tv-*` component (by the version published on npm), and re-exports them for unified consumption.\n\n[![npm](https://img.shields.io/npm/v/@todovue/tv-ui.svg)](https://www.npmjs.com/package/@todovue/tv-ui)\n[![npm downloads](https://img.shields.io/npm/dm/@todovue/tv-ui.svg)](https://www.npmjs.com/package/@todovue/tv-ui)\n[![npm total downloads](https://img.shields.io/npm/dt/@todovue/tv-ui.svg)](https://www.npmjs.com/package/@todovue/tv-ui)\n![License](https://img.shields.io/github/license/TODOvue/tv-ui)\n![Release Date](https://img.shields.io/github/release-date/TODOvue/tv-ui)\n![Bundle Size](https://img.shields.io/bundlephobia/minzip/@todovue/tv-ui)\n![Node Version](https://img.shields.io/node/v/@todovue/tv-ui)\n![Last Commit](https://img.shields.io/github/last-commit/TODOvue/tv-ui)\n![Stars](https://img.shields.io/github/stars/TODOvue/tv-ui?style=social)\n\n\u003e Demo / docs: https://ui.todovue.blog\n\n## Table of contents\n- [Features](#features)\n- [Installation](#installation)\n- [Quick Start (SPA)](#quick-start-spa)\n- [Using styles](#using-styles)\n- [Nuxt (SSR) / Nuxt Module](#nuxt-ssr--nuxt-module)\n- [Exported components](#exported-components)\n- [Registration options](#registration-options)\n- [SSR notes](#ssr-notes)\n- [Development](#development)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Features\n- **One-time install** to get TODOvue components available.\n- **Vue plugin**: `app.use(TvUi)` registers components globally.\n- **Re-exports**: you can import specific components from `@todovue/tv-ui`.\n- Compatible with **SPA** (Vite/Vue CLI) and **SSR** (Nuxt) as long as your app imports the styles.\n- **Does not bundle Vue nor the `@todovue/*` packages** into the build: they remain external dependencies (great for ecosystems and tree-shaking).\n\n## Installation\nWith npm:\n```bash\nnpm install @todovue/tv-ui\n```\nWith yarn:\n```bash\nyarn add @todovue/tv-ui\n```\nWith pnpm:\n```bash\npnpm add @todovue/tv-ui\n```\n\n\u003e Node requirement for this repo: `\u003e= 20.19.0`.\n\n## Quick Start (SPA)\nGlobal registration (main.js / main.ts):\n```js\nimport { createApp } from 'vue'\nimport App from './App.vue'\n\n// Styles (see “Using styles” section)\nimport '@todovue/tv-ui/style.css'\n\nimport TvUi from '@todovue/tv-ui'\n\ncreateApp(App)\n  .use(TvUi) // enables \u003cTvButton /\u003e, \u003cTvCard /\u003e, etc. globally\n  .mount('#app')\n```\n\nUsage in a component:\n```vue\n\u003ctemplate\u003e\n  \u003cTvButton variant=\"success\" icon=\"check\"\u003eSave\u003c/TvButton\u003e\n\u003c/template\u003e\n```\n\nLocal import (named export) if you prefer granular control:\n```vue\n\u003cscript setup\u003e\nimport '@todovue/tv-ui/style.css'\nimport { TvButton, TvCard } from '@todovue/tv-ui'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cTvCard\u003e\n    \u003cTvButton\u003eAction\u003c/TvButton\u003e\n  \u003c/TvCard\u003e\n\u003c/template\u003e\n```\n\n## Using styles\n`@todovue/tv-ui` exposes a styles entry:\n\n- Recommended import:\n```js\nimport '@todovue/tv-ui/style.css'\n```\n\nThis points to `./dist/tv-ui.css` (via `exports[\"./style.css\"]`).\n\n### What about per-component styles?\nYou can also import styles from each package:\n```js\nimport '@todovue/tv-button/style.css'\nimport '@todovue/tv-card/style.css'\n```\n\nThis is useful if you:\n- only use 1–2 components,\n- want to control exactly what CSS gets into your bundle,\n- or are migrating gradually.\n\n## Nuxt (SSR) / Nuxt Module\nThis package publishes a Nuxt module at `@todovue/tv-ui/nuxt` that **injects the CSS** of `@todovue/*` packages into `nuxt.options.css`.\n\n### Setup\n```ts\n// nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: [\n    '@todovue/tv-ui/nuxt'\n  ]\n})\n```\n\n### Plugin registration (optional)\nYou can register all components globally:\n```ts\n// plugins/tv-ui.ts\nimport { defineNuxtPlugin } from '#app'\nimport TvUi from '@todovue/tv-ui'\n\nexport default defineNuxtPlugin((nuxtApp) =\u003e {\n  nuxtApp.vueApp.use(TvUi)\n})\n```\n\nOr import them locally:\n```vue\n\u003cscript setup\u003e\nimport { TvButton } from '@todovue/tv-ui'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cTvButton\u003eHello\u003c/TvButton\u003e\n\u003c/template\u003e\n```\n\n## Exported components\nCurrently `@todovue/tv-ui` re-exports:\n\n- `TvAlert` - [GitHub](https://github.com/TODOvue/tv-alert) | [Demo](https://ui.todovue.blog/alert)\n- `TvArticle` - [GitHub](https://github.com/TODOvue/tv-article) | [Demo](https://ui.todovue.blog/article)\n- `TvBreadcrumbs` - [GitHub](https://github.com/TODOvue/tv-breadcrumbs) | [Demo](https://ui.todovue.blog/breadcrumbs)\n- `TvButton` - [GitHub](https://github.com/TODOvue/tv-button) | [Demo](https://ui.todovue.blog/button)\n- `TvCard` - [GitHub](https://github.com/TODOvue/tv-card) | [Demo](https://ui.todovue.blog/card)\n- `TvDemo` - [GitHub](https://github.com/TODOvue/tv-demo) | [Demo](https://ui.todovue.blog/demo)\n- `TvFooter` - [GitHub](https://github.com/TODOvue/tv-footer) | [Demo](https://ui.todovue.blog/footer)\n- `TvHero` - [GitHub](https://github.com/TODOvue/tv-hero) | [Demo](https://ui.todovue.blog/hero)\n- `TvLabel` - [GitHub](https://github.com/TODOvue/tv-label) | [Demo](https://ui.todovue.blog/label)\n- `TvMenu` - [GitHub](https://github.com/TODOvue/tv-menu) | [Demo](https://ui.todovue.blog/menu)\n- `TvModal` - [GitHub](https://github.com/TODOvue/tv-modal) | [Demo](https://ui.todovue.blog/modal)\n- `TvPagination` - [GitHub](https://github.com/TODOvue/tv-pagination) | [Demo](https://ui.todovue.blog/pagination)\n- `TvProgressBar` - [GitHub](https://github.com/TODOvue/tv-progress-bar) | [Demo](https://ui.todovue.blog/progressbar)\n- `TvRelativeTime` - [GitHub](https://github.com/TODOvue/tv-relative-time) | [Demo](https://ui.todovue.blog/relativetime)\n- `TvScrollTop` - [GitHub](https://github.com/TODOvue/tv-scroll-top) | [Demo](https://ui.todovue.blog/scrolltop)\n- `TvSearch` - [GitHub](https://github.com/TODOvue/tv-search) | [Demo](https://ui.todovue.blog/search)\n- `TvSettings` - [GitHub](https://github.com/TODOvue/tv-settings) | [Demo](https://ui.todovue.blog/settings)\n- `TvSidebar` - [GitHub](https://github.com/TODOvue/tv-sidebar) | [Demo](https://ui.todovue.blog/sidebar)\n- `TvThemeButton` - [GitHub](https://github.com/TODOvue/tv-theme-button) | [Demo](https://ui.todovue.blog/themebutton)\n- `TvToc` - [GitHub](https://github.com/TODOvue/tv-toc) | [Demo](https://ui.todovue.blog/toc)\n\n## Registration options\n| Approach            | Example                                     | When to use                                          |\n|---------------------|---------------------------------------------|------------------------------------------------------|\n| Global via plugin   | `app.use(TvUi)`                             | You use many components across the whole app         |\n| Local import        | `import { TvButton } from '@todovue/tv-ui'` | Isolated views, code-splitting, fine-grained control |\n| Individual packages | `import TvButton from '@todovue/tv-button'` | If you want to install/update components separately  |\n\n## SSR notes\n- This package does not assume a DOM during plugin installation.\n- Still, SSR compatibility depends on each `@todovue/*` component not accessing `window/document` at render time.\n- In Nuxt, the `@todovue/tv-ui/nuxt` module takes care of registering global CSS for you.\n\n## Development\nAvailable scripts:\n- `dev`: copies `README.md`/`CHANGELOG.md` from `node_modules/@todovue/*` into `public/demos/*` and starts Vite.\n- `build`: library build (ESM + CJS) + types.\n- `build:demo`: builds the demo (target `demo`) and copies `README.md`/`CHANGELOG.md` to `public/`.\n\nCommands:\n```bash\nnpm run dev\nnpm run build\nnpm run build:demo\n```\n\n## Contributing\nPRs and issues are welcome. See:\n- `CONTRIBUTING.md`\n- `CODE_OF_CONDUCT.md`\n\n## License\nMIT © TODOvue\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTODOvue%2Ftv-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTODOvue%2Ftv-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTODOvue%2Ftv-ui/lists"}