Clone the repository and install dependencies at the root level:

Bash

git clone https://github.com/katlux-ui/KatluxShowcase.git
cd KatluxShowcase
npm install

Run the local Nuxt development server with hot-module reloading:

Bash

npm run dev

The Showcase application automatically imports local monorepo packages (packages/katlux-toolkit, packages/katlux-providers, packages/katlux-preset-modern). Any edits to components or providers take effect immediately.

Add a new Vue file under apps/showcase/pages/:

Vue

<template lang="pug">
.page-my-component
	h1 My Component Showcase
	ShowcaseViewer
		template(#preview)
			KButton(type="primary") Demo
		template(#code)
			CodeBlock(lang="pug")
				pre.
					KButton(type="primary") Demo
</template>

Add the page route entry to apps/showcase/assets/data/navigation.json:

JSON

{
	"label": "My Component",
	"path": "/components/mycomponent"
}

TEXT

KatluxShowcase/
├── apps/
│   └── showcase/              # Nuxt 3 Showcase App
│       ├── assets/data/       # navigation.json
│       ├── components/        # Layout & viewer components
│       ├── pages/             # Showcase page routes
│       └── nuxt.config.ts
├── packages/
│   ├── katlux-toolkit/        # @katlux/toolkit
│   ├── katlux-providers/      # @katlux/providers
│   ├── katlux-preset-modern/  # @katlux/preset-modern
│   ├── katlux-block-charts/   # Block components
│   └── katlux-block-ecommerce/
├── package.json
└── nuxt.config.ts

Katlux Showcase Development