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://ui.todovue.blog/demo/

Table of Contents

• Features
• Installation
• Quick Start (SPA)
• Nuxt 4 / SSR Usage
• Component Registration Options
• Props
• Events
• Customization (Styles)
• SSR Notes
• 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

Usage of Styles

Vue/Vite (SPA)

Import the CSS generated by the library in your main entry file:

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

import '@todovue/tv-demo/style.css'
import { TvDemo } from '@todovue/tv-demo'

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

Nuxt 3/4

Add the library's CSS to your Nuxt configuration:

// nuxt.config.ts
export default defineNuxtConfig({
  css: ['@todovue/tv-demo/style.css'],
})

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 4 / 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
componentName	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
showDocumentation	Boolean	true	Show or hide the documentation tab	false
showChangelog	Boolean	true	Show or hide the changelog tab	false
manualEmits	Array	[]	List of event names to listen relative to the component	false

Events

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

Usage:

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

Manual Emits (for async components):

<TvDemo
  :component="AsyncComponent"
  :manual-emits="['click', 'submit']"
  :variants="demos"
/>

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.

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