TODOvue Demo Catalog (TvDemo)

A flexible, framework-agnostic Vue 3 component catalog for demos, documentation, and playgrounds. Compatible with both SPA and SSR (Nuxt 3), with automatic style injection and no DOM assumptions.

Demo: https://tv-demo.netlify.app/

---

Table of Contents

• Features
• Installation
• Quick Start (SPA)
• Nuxt 3 / SSR Usage
• Component Registration Options
• Props
• Events
• Customization (Styles)
• SSR Notes
• Roadmap
• Development
• Contributing
• License

---

Features

• Visual catalog for Vue 3 components with live variants.
• SPA and SSR (Nuxt 3) compatible.
• Automatic import of global and highlight.js styles (no manual CSS import needed).
• Interactive code highlighting and markdown documentation support.
• Modular structure, easy to extend.
• Tree-shake friendly and ready for modern bundlers.

---

Installation

Using npm:

npm install @todovue/tv-demo

Using yarn:

yarn add @todovue/tv-demo

Using pnpm:

pnpm add @todovue/tv-demo

---

Quick Start (SPA)

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

import { createApp } from 'vue'
import App from './App.vue'
import TvDemo from '@todovue/tv-demo'

createApp(App)
  .component('TvDemo', TvDemo)
  .mount('#app')

Local import inside a component:

<script setup>
import { TvDemo } from '@todovue/tv-demo'
</script>

<template>
  <TvDemo />
</template>

---

Nuxt 3 / SSR Usage

Create a plugin file: plugins/tv-demo.client.ts (or without suffix for SSR, it's safe):

import { defineNuxtPlugin } from '#app'
import TvDemo from '@todovue/tv-demo'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.component('TvDemo', TvDemo)
})

Use anywhere:

<TvDemo />

Direct import (no plugin):

<script setup>
import { TvDemo } from '@todovue/tv-demo'
</script>

---

Component Registration Options

Approach	When to use
Global via app.component('TvDemo', TvDemo)	Frequent use across the app
Local named import { TvDemo }	Isolated/code-split contexts
Direct default import import TvDemo from ...	Single use or manual registration

---

Props

Name	Type	Default	Description	Required
component	Object		Component to display	true
variants	Array		Variations of the component	true
hideBackground	Boolean	false	Hide the background of the component demo	false
demoStyle	Object		Style of the component	false
nameComponent	String	null	Name of the component to display in the demo	false
npmInstall	String	null	Command to install the component (without npm install)	false
sourceLink	String	null	Link to the source code of the component	false
urlClone	String	null	Link to clone the repository of the component (without git clone)	false
isDevComponent	Boolean	false	Indicates that the component is in development (to include -D)	false
version	String	1.0.0	Version of the component	false
readmePath	String	./README.md	Path to the README file of the component	false

---

Events

Event name	Description
select-demo	Emitted when a demo/variant is selected

Usage:

<TvDemo @select-demo="onSelectDemo" />

---

Customization (Styles)

• All global and highlight.js styles are injected automatically.
• You can override styles by passing the demoStyle prop:

const demoStyle = ref({
  dark: {
    backgroundBody: "#000000",
    backgroundContent: "#1f1f1f",
    color: "#ffffff",
  },
  light: {
    backgroundBody: "#ffffff",
    backgroundContent: "#f5f5f5",
    color: "#000000",
  },
});

Use in your component:

<TvDemo :component="component" :variants="demos" :demoStyle="demoStyle" />

You can provide colors for both dark and light themes, or just one. Defaults are used if not provided.

---

SSR Notes

• No direct DOM (window / document) access in the source code—safe for SSR.
• Styles are injected automatically when you import the library.
• Code highlighting works in both Vite and Nuxt.
• Markdown documentation is supported by placing your README.md in the public/ folder and referencing it via the readmePath prop.

---

Roadmap

Item	Status
More highlight.js themes	Planned
Advanced integration examples	Planned
Accessibility improvements	Planned
Dark mode support	Considering

---

Development

git clone https://github.com/TODOvue/tv-demo.git
cd tv-demo
yarn install
yarn dev     # run local demo
yarn build   # build library

The local demo is served with Vite using index.html and examples in src/demo.

---

Contributing

PRs and issues are welcome. See CONTRIBUTING.md and CODE_OF_CONDUCT.md.

---

License

MIT © TODOvue

---

Attributions

Crafted for the TODOvue component ecosystem