Blocks

Katlux Blocks are high-level, production-ready UI compositions that combine multiple Katlux components into complete, domain-specific features. Each block is distributed as its own optional package and registers globally in your Nuxt application — no manual imports required.

Description

📈 Charts (@katlux/block-charts)

Interactive data visualization blocks powered by D3. Includes Line, Area, Bar, Pie, Scatter and Heatmap charts — all accepting an ADataProvider for live data feeds.

🛒 E-Commerce (@katlux/block-ecommerce)

Ready-made storefront UI blocks including product lists, filters and cart flows. Designed to integrate directly with server-side data providers for real-time inventory.

Install the block packages you need alongside the core toolkit:

Bash

# Charts block
npm install @katlux/toolkit @katlux/block-charts

# E-Commerce block
npm install @katlux/toolkit @katlux/block-ecommerce

# Or install both
npm install @katlux/toolkit @katlux/block-charts @katlux/block-ecommerce

Block packages are Nuxt modules — register them in nuxt.config.ts to auto-install all components globally:

TypeScript

// nuxt.config.ts
export default defineNuxtConfig({
    modules: [
        '@katlux/toolkit',
        '@katlux/block-charts',
        '@katlux/block-ecommerce'
    ]
})

Once installed, chart components are available globally. Pair them with any ADataProvider for reactive data:

TypeScript

import { CFlatClientDataProvider } from '@katlux/providers/data'

const provider = new CFlatClientDataProvider()
provider.setData([
    { month: 'Jan', revenue: 12000 },
    { month: 'Feb', revenue: 18500 },
    { month: 'Mar', revenue: 14200 }
])

Vue

<template lang="pug">
KLineChart(
    :dataProvider="provider"
    xField="month"
    yField="revenue"
)
</template>

Product list blocks connect to your API via a server-side data provider for real-time pagination and filtering:

TypeScript

import { CAPIFlatServerDataProvider } from '@katlux/providers/data'

const provider = new CAPIFlatServerDataProvider({ pageSize: 24 })
await provider.setAPIUrl('/api/v1/products')

Vue

<template lang="pug">
KProductList(:dataProvider="provider")
</template>