HomeComponentsBlocksPresettingProvidersInternationalizationCommunityDevelopers
select

Katlux Toolkit

A robust, environment-agnostic ecosystem for Nuxt 3. Accelerate your enterprise Vue workflows using declarative component presetting, standard data providers, and production-ready blocks.

Get StartedView Guide

The Three Core Pillars

Katlux decouples visual styling, data handling, and page building into three distinct layers.

🎨

Component Presets

Presetting separates the visual design layer of a component from its markup and controller code. Define global styles, custom template overrides, and design tokens to restyle components at runtime.

  • CSS Custom Properties (Design Tokens)
  • Multi-theme presets (e.g. Modern vs Default)
  • Dynamic template resolution
Explore Presets
🔄

Data & Cache Providers

Providers manage network operations, server-side pagination, querying, filtering, and cross-tab/indexedDB state. Hook standard client or server data providers into components.

  • Flat & Tree API DataProviders
  • Caching with 6 customizable strategies
  • Automated query generation & deduplication
Explore Providers
🧱

Layout Blocks

Blocks are ready-made, pre-composed sections engineered for common business routines. Copy-paste pre-built charts or e-commerce lists to build functional layouts in seconds.

  • Interactive Chart blocks
  • E-Commerce Product list compositions
  • Scalable & responsive dashboard components
Explore Blocks

Ecosystem Architecture

How Presets, Providers, and Blocks fit together in a Katlux app.

🎨 How Component Presetting Works

Katlux components are built templates that look for active presets. Instead of overriding CSS globally with !important, you specify an active preset (like modern or default) in app.config.ts. The components dynamically load the custom styles and HTML templates associated with the preset.

TypeScript
// app.config.ts
export default defineAppConfig({
	katluxToolkit: {
		presetList: [
			{ name: 'Default', value: 'default' },
			{ name: 'Modern', value: 'modern' }
		],
		activePreset: 'modern'
	}
})
🔄 How Data Providers Bind to Components

Any component that consumes data (like a datatable, tree, or tree picker) takes a unified :dataProvider prop of class ADataProvider. This means you can swap a local client data source for a remote server API without writing custom rendering adapters.

Vue
<template lang="pug">
// Binds a reactive tree structure with server filtering and caching
KTreeView(
	:dataProvider="myTreeDataProvider"
	:columns="treeColumns"
	multiSelect
)
</template>
🧱 Building with Blocks

Blocks assemble data providers, layout elements (KGrid, KPanel), and controls to deliver full features. For example, a dashboard block might initialize multiple providers for sales and user metrics, then bind them to layout panels and charts.

Vue
<template lang="pug">
KGrid(columns=2 gap="lg")
	KPanel(title="Monthly revenue")
		KLineChart(:dataProvider="revenueProvider")
	KPanel(title="Top Products")
		KEcommerceProductList(:dataProvider="productsProvider")
</template>