TODOvue UI (TvUi)

An umbrella package for Vue 3 that installs and re-exports the official @todovue/* components.

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.

Demo / docs: https://ui.todovue.blog

Table of contents

• Features
• Installation
• Quick Start (SPA)
• Using styles
• Nuxt (SSR) / Nuxt Module
• Exported components
• Registration options
• SSR notes
• Development
• Contributing
• License

Features

• One-time install to get TODOvue components available.
• Vue plugin: app.use(TvUi) registers components globally.
• Re-exports: you can import specific components from @todovue/tv-ui.
• Compatible with SPA (Vite/Vue CLI) and SSR (Nuxt) as long as your app imports the styles.
• Does not bundle Vue nor the @todovue/* packages into the build: they remain external dependencies (great for ecosystems and tree-shaking).

Installation

With npm:

npm install @todovue/tv-ui

With yarn:

yarn add @todovue/tv-ui

With pnpm:

pnpm add @todovue/tv-ui

Node requirement for this repo: >= 20.19.0.

Quick Start (SPA)

Global registration (main.js / main.ts):

import { createApp } from 'vue'
import App from './App.vue'

// Styles (see “Using styles” section)
import '@todovue/tv-ui/style.css'

import TvUi from '@todovue/tv-ui'

createApp(App)
  .use(TvUi) // enables <TvButton />, <TvCard />, etc. globally
  .mount('#app')

Usage in a component:

<template>
  <TvButton variant="success" icon="check">Save</TvButton>
</template>

Local import (named export) if you prefer granular control:

<script setup>
import '@todovue/tv-ui/style.css'
import { TvButton, TvCard } from '@todovue/tv-ui'
</script>

<template>
  <TvCard>
    <TvButton>Action</TvButton>
  </TvCard>
</template>

Using styles

@todovue/tv-ui exposes a styles entry:

• Recommended import:

import '@todovue/tv-ui/style.css'

This points to ./dist/tv-ui.css (via exports["./style.css"]).

What about per-component styles?

You can also import styles from each package:

import '@todovue/tv-button/style.css'
import '@todovue/tv-card/style.css'

This is useful if you:

• only use 1–2 components,
• want to control exactly what CSS gets into your bundle,
• or are migrating gradually.

Nuxt (SSR) / Nuxt Module

This package publishes a Nuxt module at @todovue/tv-ui/nuxt that injects the CSS of @todovue/* packages into nuxt.options.css.

Setup

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@todovue/tv-ui/nuxt'
  ]
})

Plugin registration (optional)

You can register all components globally:

// plugins/tv-ui.ts
import { defineNuxtPlugin } from '#app'
import TvUi from '@todovue/tv-ui'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(TvUi)
})

Or import them locally:

<script setup>
import { TvButton } from '@todovue/tv-ui'
</script>

<template>
  <TvButton>Hello</TvButton>
</template>

Exported components

Currently @todovue/tv-ui re-exports:

• TvAlert - GitHub | Demo
• TvArticle - GitHub | Demo
• TvBreadcrumbs - GitHub | Demo
• TvButton - GitHub | Demo
• TvCard - GitHub | Demo
• TvDemo - GitHub | Demo
• TvFooter - GitHub | Demo
• TvHero - GitHub | Demo
• TvLabel - GitHub | Demo
• TvMenu - GitHub | Demo
• TvModal - GitHub | Demo
• TvPagination - GitHub | Demo
• TvProgressBar - GitHub | Demo
• TvRelativeTime - GitHub | Demo
• TvScrollTop - GitHub | Demo
• TvSearch - GitHub | Demo
• TvSettings - GitHub | Demo
• TvSidebar - GitHub | Demo
• TvThemeButton - GitHub | Demo
• TvToc - GitHub | Demo

Registration options

| Approach | Example | When to use | |---------------------|---------------------------------------------|------------------------------------------------------| | Global via plugin | app.use(TvUi) | You use many components across the whole app | | Local import | import { TvButton } from '@todovue/tv-ui' | Isolated views, code-splitting, fine-grained control | | Individual packages | import TvButton from '@todovue/tv-button' | If you want to install/update components separately |

SSR notes

• This package does not assume a DOM during plugin installation.
• Still, SSR compatibility depends on each @todovue/* component not accessing window/document at render time.
• In Nuxt, the @todovue/tv-ui/nuxt module takes care of registering global CSS for you.

Development

Available scripts:

• dev: copies README.md/CHANGELOG.md from node_modules/@todovue/* into public/demos/* and starts Vite.
• build: library build (ESM + CJS) + types.
• build:demo: builds the demo (target demo) and copies README.md/CHANGELOG.md to public/.

Commands:

npm run dev
npm run build
npm run build:demo

Contributing

PRs and issues are welcome. See:

• CONTRIBUTING.md
• CODE_OF_CONDUCT.md

License

MIT © TODOvue